Tailwind CSS 动画

动画是吸引用户注意、提供反馈和创造流畅体验的强大工具。Tailwind CSS 内置了一些基础的动画和过渡工具类，让你可以轻松地为你的网站添加动态效果。

Transitions (过渡)

过渡 (Transition) 是最常见的动画形式，它可以在元素的某个 CSS 属性发生变化时，平滑地为其添加动画效果。例如，当按钮的背景色在 hover 状态下改变时。

要启用过渡，你需要做三件事：

添加 transition 类: 这是一个基础类，用于启用过渡效果。
设置过渡时长 (Duration): 使用 duration-{time} 工具类。
- duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000
设置过渡缓动函数 (Timing Function): 使用 ease-{timing} 工具类。
- ease-linear: 线性
- ease-in: 慢速开始
- ease-out: 慢速结束
- ease-in-out: (默认) 慢速开始和结束

html

<button class="transition duration-300 ease-in-out bg-blue-500 hover:bg-red-500 transform hover:-translate-y-1 hover:scale-110 ...">
  Hover me
</button>

在这个例子中，当鼠标悬停时，背景色、Y 轴位置和缩放比例的改变都会在 300 毫秒内平滑地发生。

默认情况下，Tailwind 会为颜色、阴影、transform 等常用属性启用过渡。你可以通过 transition-{property} 工具类（如 transition-colors）来单独控制哪些属性参与过渡。

Transforms (变换)

Transform 允许你对元素进行旋转、缩放、移动和倾斜，而不会影响到文档流中的其他元素。

Scale (缩放): scale-{amount}, scale-x-{amount}, scale-y-{amount}
- scale-95, scale-100, scale-110
Rotate (旋转): rotate-{angle}
- rotate-45, rotate-90, rotate-180
Translate (移动): translate-x-{amount}, translate-y-{amount}
- translate-x-4, translate-y-1/2, -translate-x-full
Skew (倾斜): skew-x-{angle}, skew-y-{angle}
- skew-x-3, skew-y-12

要使用 transform，你必须先在元素上添加 transform 工具类来启用 GPU 加速，以获得更平滑的动画效果。

Animation (动画)

对于更复杂的、基于关键帧 (keyframes) 的动画，Tailwind 提供了一些预设的动画工具类。

animate-spin: 用于创建加载指示器的旋转动画。

html

<svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
  <!-- ... -->
</svg>

animate-ping: 创建一个向外扩散的波纹效果，常用于通知标记。

html

<span class="relative flex h-3 w-3">
  <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-3 w-3 bg-sky-500"></span>
</span>

animate-pulse: 创建一个缓慢淡入淡出的效果，常用于骨架屏 (Skeleton) 加载状态。

html

<div class="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
  <div class="animate-pulse flex space-x-4">
    <div class="rounded-full bg-slate-200 h-10 w-10"></div>
    <div class="flex-1 space-y-6 py-1">
      <div class="h-2 bg-slate-200 rounded"></div>
      <div class="space-y-3">
        <div class="grid grid-cols-3 gap-4">
          <div class="h-2 bg-slate-200 rounded col-span-2"></div>
          <div class="h-2 bg-slate-200 rounded col-span-1"></div>
        </div>
        <div class="h-2 bg-slate-200 rounded"></div>
      </div>
    </div>
  </div>
</div>

animate-bounce: 创建一个上下弹跳的效果，常用于指示可滚动或可点击的箭头。

你也可以在 tailwind.config.js 中定义自己的关键帧动画，并使用 animate-{name} 来应用它们。

Tailwind CSS 动画 ​

Transitions (过渡) ​

Transforms (变换) ​

Animation (动画) ​

Tailwind CSS 动画

Transitions (过渡)

Transforms (变换)

Animation (动画)