CSS工具Tailwind如何实现滚动动画_Tailwind animate类结合scroll事件-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-28 20:32:02

原创

904人浏览过

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

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

Tailwind CSS 本身不直接提供滚动动画（scroll-based animations）功能，但可以通过其内置的 animate 类结合原生 JavaScript 的 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 的动画类一加载就会执行，所以要配合 JavaScript，在元素滚动进入视口时再添加动画类。

Melodio

Melodio是全球首款个性化AI流媒体音乐平台，能够根据用户场景或心情生成定制化音乐。

110

查看详情

基本思路：

给目标元素设置一个初始状态（例如 opacity-0）
监听 window 的 scroll 事件
判断元素是否进入视口（使用 getBoundingClientRect）
一旦进入，添加 animate 类（如 animate-fadeUp）
建议添加后移除监听或标记已触发，避免重复执行

示例代码：

// HTML
<div class="opacity-0" data-animate="fadeUp">滚动到我时动画出现</div>

// JavaScript
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);
});