必须手写@keyframes css并注册到theme.animation，再用animate-类调用；animate-类不支持iteration-count等属性，需内联样式或定义复合关键帧；交互状态动画需独立定义并配合hover:等变体。
如何用 @keyframes 在 Tailwind 中定义自定义动画帧？
Tailwind 本身不提供复杂关键帧的内置支持，@keyframes 必须手写 CSS，再通过 animation-name 注册到 theme.animation。不能指望 animate-bounce 这类默认动画满足多阶段、带贝塞尔缓动或状态切换的需求。
- 直接在
src/styles.css（或tailwind.config.js同级的 CSS 入口）里写@keyframes，例如：@keyframes slide-in-fade { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } } - 然后在
tailwind.config.js的theme.extend.animation中映射名称：animation: { 'slide-in-fade': 'slide-in-fade 0.3s ease-out forwards' } - 最后在 HTML 中使用：
class="animate-slide-in-fade"
注意：Tailwind 不会解析 @keyframes 内部语法，写错不会报错，但浏览器不执行——常见错误是漏写单位（如 translateY(16) 缺 px）、百分号写成小数（0.5 而非 50%），或用了不支持的 CSS 属性（如 filter 在旧版 Safari 中需加前缀）。
为什么 animate- 类无法控制播放次数或方向？
animate- 类只绑定 animation-name 和预设时长/缓动，不包含 animation-iteration-count、animation-direction 等属性。想实现「播放两次后反向」或「暂停在最后一帧」，必须额外加内联样式或工具类。
- 使用 Tailwind 的响应式前缀组合，比如：
animate-slide-in-fade+!duration-500（覆盖默认时长） - 但像
animation-iteration-count: 2这种，没有对应工具类，得写：style="animation-iteration-count: 2; animation-direction: alternate;"
- 或提前在 CSS 中定义复合动画：
@keyframes slide-alt { 0%, 100% { opacity: 0; transform: translateX(-20px); } 50% { opacity: 1; transform: translateX(0); } }然后注册为animate-slide-alt，避免运行时拼接。
别指望 animate- 类能替代完整 animation 声明；它只是快捷入口，复杂逻辑仍要回归原生 CSS 控制点。
如何让关键帧动画与交互状态（hover / focus）联动？
Tailwind 的 hover:、focus: 变体只作用于单个声明，不能直接触发新 @keyframes。常见误区是写 hover:animate-pulse 想让 hover 时启动脉冲，但若元素初始已有动画，两者会冲突。
- 正确做法是：定义两套独立关键帧，一套用于常态，一套用于交互态，例如：
@keyframes idle-rotate { to { transform: rotate(0deg); } } @keyframes hover-rotate { to { transform: rotate(360deg); } } - 注册为两个动画名：
idle-rotate和hover-rotate - 类名组合：
animate-idle-rotate hover:animate-hover-rotate - 注意：确保两个动画的
animation-fill-mode一致（推荐forwards），否则 hover 离开后元素会跳回初始状态
另外，transition 和 animation 混用容易出问题——比如同时设置 transition-transform 和 animate-spin，浏览器可能丢帧或表现不可预测。优先选其一，别叠加工具类。
复杂动画的关键帧不是配置出来的，是写出来的；Tailwind 只负责把名字串进去，中间逻辑、时机、状态衔接全靠你对 CSS 动画模型的理解。别绕开 @keyframes，也别幻想用 class 把所有行为都声明完。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
