使用 Tailwind CSS 插件添加动画

你已经构建了一个简洁的 Tailwind UI,但它感觉很静态。添加动效本应很简单——直到你盯着空白的 tailwind.config.js 文件,不知道是需要插件、关键帧,还是其他什么东西。这里有一份清晰的选项指南。

Tailwind 开箱即用提供的功能

Tailwind 自带四个动画工具类,涵盖了大量实际使用场景:

• animate-spin — 旋转加载器和图标
• animate-ping — 通知徽章和雷达效果
• animate-pulse — 骨架加载屏幕
• animate-bounce — 滚动指示器和注意力提示

对于简单的状态反馈——提交按钮上的加载旋转器、数据获取时的脉动骨架屏——这些内置的 Tailwind CSS 动画通常就足够了。将它们与过渡工具类(transition、duration-300、ease-in-out)配合使用来处理悬停和焦点状态,你就可以覆盖大多数微交互,而无需接触插件。你可以在官方 Tailwind 动画文档 中探索所有这些工具类。

何时内置功能就够用: 加载器、骨架屏、徽章和基本的悬停过渡。

何时需要使用 Tailwind 动画插件

内置功能集有其局限性。它不包括进入/退出动画、方向性滑动、翻转或滚动触发的显示效果。这就是 Tailwind 动画插件发挥作用的地方。

tailwindcss-animate

tailwindcss-animate 添加了可组合的进入和退出工具类:

<!-- 挂载时淡入并放大 -->
<div class="animate-in fade-in zoom-in duration-300">...</div>

<!-- 关闭时向顶部滑出 -->
<div class="animate-out slide-out-to-top fade-out duration-200">...</div>

它还提供了细粒度的控制——delay-150、repeat-infinite、fill-mode-forwards、direction-alternate——让你无需编写自定义 CSS 就能调整动画。

然而,该插件自 2023 年以来没有发布新版本,因此与较新 Tailwind 版本的兼容性可能因你的设置而异。一些现代的 Tailwind v4 技术栈转而使用围绕框架 CSS 优先架构设计的更新动画包。

tailwind-animations

tailwind-animations 采用了不同的方法:一个包含大量命名动画的库(animate-fade-in、animate-shake、animate-heartbeat、animate-jelly 等等)。

<div class="animate-fade-in">
  淡入盒子
</div>

该插件还支持使用 CSS animation-timeline 属性的基于滚动的动画工具类。

<!-- 使用 CSS View Timeline 在滚动时显示 -->
<div class="timeline-view animate-fade-in-up animate-range-gradual">...</div>

这些滚动驱动的动画依赖于较新的浏览器特性,如 animation-timeline,因此浏览器支持可能因你的目标受众而异。

Tailwind CSS v4 和 CSS 优先方法

如果你使用的是 Tailwind CSS v4,推荐的添加自定义动画的方式是使用 @theme 直接在 CSS 中定义:

@theme {
  --animate-wiggle: wiggle 1s ease-in-out infinite;

  @keyframes wiggle {
    0%, 100% { transform: rotate(-3deg) }
    50% { transform: rotate(3deg) }
  }
}

这使得 animate-wiggle 立即作为工具类可用——无需插件。对于一次性的自定义动画,这通常比安装依赖项更简洁。

兼容性说明: 一些插件是为 Tailwind v3 构建的,可能不完全支持 v4 的 CSS 优先架构。在将插件添加到 v4 项目之前,请务必检查插件的仓库或文档。

不要忘记可访问性

将任何非必要动画包裹在 motion-safe: 中,这样偏好减少动效的用户就不会受到影响:

<svg class="motion-safe:animate-spin ...">...</svg>

Tailwind 的 motion-reduce: 变体的工作方式相反——仅在偏好减少动效时应用样式。同时使用两者,为每个用户提供舒适的体验。

选择你的方法

结论

从 Tailwind 已经提供的功能开始。四个内置动画工具类和过渡类可以处理大多数日常微交互。当你需要进入/退出序列、方向性滑动或滚动触发的显示效果时,像 tailwindcss-animate 或 tailwind-animations 这样的插件可以完美集成。如果你使用的是 v4,在使用包之前,尝试直接在 CSS 中定义自定义动画令牌。无论你选择哪条路径,都要记得尊重 prefers-reduced-motion 媒体查询,让每个用户都能获得舒适的体验。

常见问题

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.