Tailwind 中多阶段动画 keyframes 必须用带引号的百分比字符串（如'0%'、'25%'），值需为字符串，语法风格须统一，且 animation 值应使用 CSS 变量支持 duration/delay 工具类。
tailwind.config.js 里 keyframes 必须用字符串百分比键
多阶段动画（比如 0% → 25% → 50% → 100%）在 Tailwind 中完全支持，但 keyframes 对象的每个帧键必须是带引号的字符串：'0%'、'25%'、'50%'、'100%'。写成 0 或 25（不带%和引号）会被静默忽略。
常见错误：'25%': { opacity: 0.5 } ✅ 正确；25: { opacity: '0.5' } ❌ 不生效；'25%': { opacity: 0.5 } ❌ 值不是字符串，也会跳过。
-
transform、opacity、color等标准可动画属性可用，但不能单独写translateX或scale - 多阶段动画中，所有帧都必须用相同语法风格：要么全用
'0%'/'100%'，要么全用'from'/'to'—— 混用（如'from'+'50%'）会导致部分帧失效 - 建议把关键帧逻辑抽成常量对象，便于复用和校验
animation 值里必须显式写出完整声明，含多阶段时长与缓动
theme.extend.animation 里的值不是“调用名”，而是最终生成到 animation CSS 属性的完整字符串。多阶段动画本身不改变这个规则，但容易因时长/缓动配置不当导致节奏断裂。
例如一个三段式淡入+位移+缩放动画，仍需写成：'staggered': 'staggered 1.2s cubic-bezier(0.33, 0.4, 0.25, 0.95) forwards' —— 时长是总时长，不是每段相加。
立即学习“前端免费学习笔记（深入）”；
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
- duration 单位必须是
s或ms，写1200（无单位）无效 - 缓动函数推荐用贝塞尔曲线（如
cubic-bezier(0.33, 0.4, 0.25, 0.95)），避免默认ease在多阶段中显得生硬 - 务必带上
forwards，否则动画播完会回退到0%状态，掩盖中间阶段效果
animate-类生效前，元素初始样式必须匹配 0% 帧
多阶段动画对起始态更敏感。如果 '0%' 定义了 opacity: '0' 和 transform: 'scale(0.8) translateX(-20px)'，那么 HTML 元素不能自带 opacity-100 或 scale-100，否则第一帧就被覆盖，动画直接从中间状态开始“跳变”。
正确做法是用 Tailwind 工具类预设起始态：class="opacity-0 scale-[0.8] -translate-x-[20px] animate-staggered"。
- 不要依赖
hidden或invisible控制显示——它们会阻断动画触发 - 若需延迟触发（如滚动进入视口），应通过 JS 动态添加
animate-staggered类，而非靠delay-工具类——后者只影响animation-delay，不解决起始态冲突 - 调试时打开 DevTools 的 Animations 面板，确认是否识别到该动画及各帧时间点是否对齐
想让 duration/delay 变体生效？animation 值里得用 CSS 变量
默认的 duration-300、delay-150 等工具类之所以能覆盖动画时长和延迟，是因为它们修改的是 animation-duration 和 animation-delay 属性。但你的自定义动画如果把时长硬编码进 animation 字符串里（如 'staggered 1.2s ...'），这些变体就失效了。
解决方案：在 theme.extend.animation 的值中用 CSS 变量替代固定值：'staggered': 'staggered var(--tw-animation-duration, 1.2s) cubic-bezier(...) forwards'。
-
var(--tw-animation-duration, 1.2s)表示优先取变量值，没定义时 fallback 到 1.2s - 同理，延迟要用
var(--tw-animation-delay, 0s)，才能响应delay-200 - 注意：Tailwind 自带的
animate-pulse就是这么实现的，可参考源码逻辑
