使用 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 媒体查询,让每个用户都能获得舒适的体验。

常见问题

我可以在 Tailwind CSS v4 中使用 tailwindcss-animate 吗?

该插件最初是为 Tailwind v3 构建的,自 2023 年以来没有发布新版本。与 Tailwind v4 的兼容性取决于项目设置,因此在 v4 项目中使用之前请检查插件仓库。它的许多动画也可以直接使用 v4 的 @theme 指令重新创建。

如何在不使用插件的情况下在 Tailwind 中添加自定义动画?

在 Tailwind v4 中,在 CSS 文件的 @theme 块内使用 --animate- 变量和相应的 @keyframes 规则定义自定义动画令牌。在 v3 中,在 tailwind.config.js 中扩展 theme.extend.keyframes 和 theme.extend.animation。两种方法都使动画作为标准工具类可用。

Tailwind 中的 transition 和 animation 工具类有什么区别?

过渡工具类如 transition、duration 和 ease 控制两个状态之间的属性变化,例如悬停或焦点。动画工具类如 animate-spin 运行基于关键帧的序列,可以循环、反向或播放一次。使用过渡处理简单的状态变化,使用动画处理连续或多步骤的动效。

Tailwind 动画会影响性能吗?

Tailwind 中基于 CSS 的动画通常性能良好,因为在动画 transform 和 opacity 时它们在合成器线程上运行。避免动画化布局属性如 width 或 height。使用 CSS animation-timeline 特性的滚动触发动画也可以很高效,但在生产环境中依赖它们之前应验证浏览器支持。