Tailwind CSS - 动画

Tailwind CSS：动画

Tailwind CSS 包含一套预配置的动画工具类，可以让你轻松地为元素添加常见的运动效果，例如旋转加载器、脉冲按钮和弹跳图标。

内置动画工具类

以下是 Tailwind 开箱即用提供的核心动画类。

类名	描述
animate-none	移除任何活动的 CSS 动画。
animate-spin	应用线性旋转动画。非常适合加载指示器。
animate-ping	创建一个缩放和淡出的“ping”或“雷达”效果。适用于通知。
animate-pulse	应用柔和的淡入淡出效果。非常适合骨架加载屏幕。
animate-bounce	使元素上下移动。非常适合吸引用户对某个元素的注意力。

示例：常见动画用例

此示例在实际情境中演示了每个内置动画，让你能够亲眼看到它们的运行效果并进行比较。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Animation Examples</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 text-slate-800 p-8 font-sans">

  <div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold text-center mb-10">Animation Utilities</h1>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 text-center">

      <!-- Animate Spin -->
      <div>
        <h3 class="font-semibold mb-4">animate-spin</h3>
        <div class="flex justify-center items-center h-24">
          <div class="w-12 h-12 border-4 border-dashed border-blue-500 border-t-transparent rounded-full animate-spin"></div>
        </div>
        <p class="text-sm text-slate-500 mt-2">Loading spinner</p>
      </div>

      <!-- Animate Ping -->
      <div>
        <h3 class="font-semibold mb-4">animate-ping</h3>
        <div class="flex justify-center items-center h-24">
          <span class="relative flex h-6 w-6">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-6 w-6 bg-sky-500"></span>
          </span>
        </div>
        <p class="text-sm text-slate-500 mt-2">Live notification</p>
      </div>

      <!-- Animate Pulse -->
      <div>
        <h3 class="font-semibold mb-4">animate-pulse</h3>
        <div class="flex justify-center items-center h-24">
          <div class="w-full max-w-[150px]">
            <div class="h-4 bg-slate-300 rounded-full w-full animate-pulse"></div>
            <div class="h-4 bg-slate-300 rounded-full w-5/6 mt-2 animate-pulse [animation-delay:0.2s]"></div>
          </div>
        </div>
        <p class="text-sm text-slate-500 mt-2">Skeleton loader</p>
      </div>

      <!-- Animate Bounce -->
      <div>
        <h3 class="font-semibold mb-4">animate-bounce</h3>
        <div class="flex justify-center items-center h-24">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 text-green-500 animate-bounce">
            <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm.53 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v5.69a.75.75 0 0 0 1.5 0v-5.69l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd" />
          </svg>
        </div>
        <p class="text-sm text-slate-500 mt-2">Scroll indicator</p>
      </div>

    </div>
  </div>

</body>
</html>

进阶：自定义动画

对于独特的动画，你可以通过在 tailwind.config.js 中定义自己的关键帧（keyframes）和动画工具类来扩展 Tailwind 的主题。这是添加项目特定动画的标准方法。

配置示例

让我们添加一个自定义的“摆动（wiggle）”动画。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      }
    },
  },
  plugins: [],
}

HTML 中的用法

配置完成后，你可以像使用任何内置工具类一样使用 animate-wiggle。

<button class="bg-rose-500 text-white p-4 rounded-lg hover:animate-wiggle">
  Wiggle Me!
</button>

可访问性最佳实践：尊重用户偏好

一些用户由于前庭障碍倾向于减少动态效果。Tailwind CSS 提供了 motion-reduce 变体，可以为这些用户禁用或替换动画。这是一个最佳实践。

<!-- The spin animation will be disabled if the user has 'prefers-reduced-motion' enabled -->
<div class="animate-spin motion-reduce:animate-none">...</div>

<!-- You can also offer a more subtle animation as an alternative -->
<button class="animate-bounce motion-reduce:animate-pulse">Click Me</button>