CSS工具Tailwind如何实现滚动动画_Tailwind animate类结合scroll事件

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

CSS工具Tailwind如何实现滚动动画_Tailwind animate类结合scroll事件

2025-11-28

浏览次数：次

返回列表

答案：Tailwind CSS通过自定义animate类结合Intersection Observer实现滚动动画。首先在配置中定义fadeUp等动画，再为元素设置初始隐藏状态；利用Intersection Observer监听页面滚动，当元素进入视口时添加对应animate类，触发如淡入、滑动等动画效果，并自动解绑避免重复执行，提升性能且兼容移动端。

css工具tailwind如何实现滚动动画_tailwind animate类结合scroll事件

Tailwind CSS 本身不直接提供滚动动画（scroll-based animations）功能，但可以通过其内置的 animate 类结合原生 J*aScript 的 scroll 事件，实现元素在滚动到视口时触发动画。以下是具体实现方式。

1. 使用 Tailwind animate 类定义动画效果

Tailwind 提供了一些基础的 CSS 动画类，比如 animate-bounce、animate-pulse、animate-spin 等。这些是预设的 keyframe 动画，可以直接使用。

但更常用的滚动动画（如淡入、滑动进入）需要自定义动画。你可以通过 tailwind.config.js 扩展 animate 类：

extend: {
  animation: {
    fadeUp: 'fadeUp 1s ease-out forwards',
  },
  keyframes: {
    fadeUp: {
      '0%': { opacity: '0', transform: 'translateY(20px)' },
      '100%': { opacity: '1', transform: 'translateY(0)' },
    },
  },
}

配置完成后，就可以使用 animate-fadeUp 类来触发“从下往上淡入”动画。

2. 结合 scroll 事件动态添加动画类

由于 Tailwind 的动画类一加载就会执行，所以要配合 J*aScript，在元素滚动进入视口时再添加动画类。

基本思路：

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

给目标元素设置一个初始状态（例如 opacity-0）
监听 window 的 scroll 事件
判断元素是否进入视口（使用 getBoundingClientRect）

一旦进入，添加 animate 类（如 animate-fadeUp）
建议添加后移除监听或标记已触发，避免重复执行

示例代码：

// HTML
滚动到我时动画出现

// J*aScript
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-fadeUp');
      observer.unobserve(entry.target); // 只触发一次
    }
  });
});

document.querySelectorAll('[data-animate]').forEach(el => {
  observer.observe(el);
});