在实际开发中，如果想要实现复杂的交互效果，此时使用 Tailwind CSS 过渡类名就无法实现了，而需要使用动画相关的类名。
Tailwind CSS 动画语法
在 Tailwind CSS 中，预设了 4 种动画模式（如下表所示），它们默认都是 “无限循环” 执行的。
| 类名 | 说明 | 使用场景 |
|---|---|---|
| animate-spin | 匀速旋转（360°） | loading 图标 |
| animate-ping | 向外扩散 | 消息提醒红点 |
| animate-pulse | 呼吸闪烁 | 骨架屏 |
| animate-bounce | 上下跳动 | 引导箭头、报错提醒 |
其中，Tailwind 还提供了一个 animate-none 的类名，专门用于清除动画。灵活运用状态修饰符（hover:、group-hover:）来搭配动画类名，能够做出非常多生动的交互效果。
<!--场景 A（默认动，悬停停）-->
<div class="animate-spin hover:animate-none"></div>
<!--场景 B（默认静，悬停动）-->
<div class="hover:animate-bounce"></div>此外需要清楚的是，过渡（transition）与动画（animation）之间是有着本质上的区别的：
- 过渡：它只能将元素的某一个属性从一个属性值过渡到另一个属性值。
- 动画：它可以将元素的某一个属性从第 1 个属性值过渡到第 2 个属性值，然后还可以继续过渡到第 3 个属性值，以此类推。
Tailwind CSS 动画示例
接下来，我们通过几个简单的例子来讲解一下如何使用 Tailwind CSS 来定义动画效果。
示例 1：Loading 图标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10 flex items-center justify-center min-h-screen bg-gray-50">
<div class="w-10 h-10 border-4 border-gray-200 border-t-green-500 rounded-full animate-spin"></div>
<span class="ml-4 text-gray-600">正在加载中...</span>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，首先我们画了一个圆圈，然后通过 border-t-green-500 只给顶部边框上色，最后使用 “animate-spin” 类名来使得它配合旋转动画不停地转动。
实际上，咱们的绿叶网也使用了类似这种的 loading 加载动画。
示例 2：雷达动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
</span>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们通过使得两个 span 重叠，一个动一个不动，然后结合 “animate-ping” 类名就能做出那种带有 “呼吸波纹” 的未读消息提醒。
示例 3：“骨架屏” 占位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10 bg-gray-50">
<div class="animate-pulse flex space-x-4 max-w-md bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<div class="rounded-full bg-gray-200 h-12 w-12"></div>
<div class="flex-1 space-y-4 py-1">
<div class="h-4 bg-gray-200 rounded w-3/4"></div>
<div class="space-y-2">
<div class="h-3 bg-gray-200 rounded"></div>
<div class="h-3 bg-gray-200 rounded w-5/6"></div>
</div>
</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在现在很多网站中，当向服务器请求数据需要等待时，我们通常不会只显示一个干巴巴的 Loading 圈，而是会显示一个 “骨架屏（Skeleton Screen）”——也就是使用 “灰色色块” 临时勾勒出内容的轮廓，并加上呼吸闪烁的动画。
使用 Tailwind CSS 的 “animate-pulse” 这个类名，我们可以轻松地实现这种大厂级别的高级用户体验。
在这个例子中，我们使用 bg-gray-200 配合 w-*、h-* 搭建出了头像和文本的物理轮廓。最关键的是，我们在最外层父容器上加上了 animate-pulse 类名。此时，整个卡片就会像呼吸一样柔和地闪烁，大大缓解了用户等待数据时的焦虑。
配合 @theme 自定义动画
如果 Tailwind CSS 内置的四种动画不能满足实际需求，比如想做一个摆钟动画效果。
在 Tailwind CSS v4 中，我们可以在 @theme 块中使用 @keyframes 定义自己的关键帧，并通过 CSS 变量 将其绑定为动画类名，从而实现自定义动画。
示例 4：自定义 “左右摇摆” 动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
/* 1. 定义关键帧 */
@keyframes swing {
0%, 100% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
}
/* 2. 定义动画类名 */
--animate-swing: swing 1s ease-in-out infinite;
}
</style>
</head>
<body class="p-10 flex justify-center">
<div class="text-[64px] animate-swing">
🔔
</div>
</body>
</html>页面效果如下图所示。
分析：
在 Tailwind CSS v4 中，自定义动画非常直观。在这个例子中，首先我们通过原生 CSS 的 @keyframes 语法定义了名为 “swing” 的关键帧。
然后，通过定义 --animate-swing 变量，将关键帧名称（swing）、持续时间（1s）、过渡曲线（ease-in-out）和循环次数（infinite）等绑定在一起。
最后，Tailwind CSS 编译时会自动识别这个 “--animate-swing” 变量，并为我们生成一个 animate-swing 的类名供 HTML 直接使用。
