animation-delay 单独使用会“闪一下”再播，因浏览器默认不应用 @keyframes 的 0% 状态；需配合 animation-fill-mode: backwards 且元素默认样式显式声明 opacity: 0 或 transform 等初始值。
animation-delay 能实现交错动画，但单独用会“闪一下”再播——必须配 animation-fill-mode: backwards，且元素默认样式里得显式写 opacity: 0 或 transform: translateY(20px)。
为什么 animation-delay 单独设不生效
只加 animation-delay: 0.2s，元素一渲染就可见，延迟后才执行淡入动画，视觉上就是“先闪现、再重播”。这是因为浏览器默认不应用 @keyframes 的 0% 状态（比如 opacity: 0），直到动画真正开始。解决办法是：animation-fill-mode: backwards 强制让 0% 关键帧在动画启动前就生效，但前提是：该状态必须已在元素的普通 CSS 样式中声明，不能只靠 @keyframes 里定义。
- 错误写法：
.item { animation: fade-in 0.3s 0.2s; }+@keyframes fade-in { 0% { opacity: 0; } }（没用，初始 opacity 是 1） - 正确写法：
.item { opacity: 0; animation: fade-in 0.3s 0.2s forwards; animation-fill-mode: backwards; } - 别用
visibility: hidden替代opacity: 0，否则布局塌陷，列表高度跳变
静态列表用 :nth-child(n) 手动设 delay
项数固定（比如导航栏、卡片墙 ≤8 项），直接用 :nth-child(n) 最轻量，不用 JS。注意别用 :nth-of-type，父容器里只要插个文本节点或注释，序号就全乱。
- 延迟步长建议 0.08s–0.15s，总延迟控制在 ≤600ms，超过用户会觉得“等太久”
- 示例：
.list-item { opacity: 0; transform: translateY(10px); animation: slide-in 0.4s ease-out forwards; animation-fill-mode: backwards; } - 然后逐个设：
.list-item:nth-child(1) { animation-delay: 0s; }，.list-item:nth-child(2) { animation-delay: 0.12s; }……最多写到:nth-child(8) - 别为每项单独写一套 @keyframes，复用同一套规则，CSS 解析更快
动态列表必须用 JS 在插入前设 style.animationDelay
React/Vue 渲染、AJAX 加载、用户下拉新增项——这些场景下，项数不固定，纯 CSS 失效。关键不是“选出来再设”，而是“创建即配置”：在 document.createElement() 后、append() 前，立刻写 el.style.animationDelay。
- 错误做法：
container.innerHTML = html; document.querySelectorAll('.item').forEach(...)（DOM 还没完成 layout，部分元素可能查不到） - 正确做法：
for (let i = 0; i - 框架中（如 React）应在
useEffect或mounted钩子中批量设置，不要每次setState都重算；确保 key 唯一，避免 DOM 复用导致 delay 错位 - 避免用
setTimeout模拟 delay，JS 执行负担重，且和 CSS 动画不同步
移动端必须处理的三个隐藏雷区
iOS Safari 和安卓 WebView 对 animation-delay + backwards 的支持有毛刺，尤其配合 transform 时。光写对 CSS 不够，还得加防护。
- 给动画元素加
will-change: opacity, transform，触发硬件加速，大幅减少闪屏 - 监听
prefers-reduced-motion: reduce，在媒体查询里关掉动画：@media (prefers-reduced-motion: reduce) { .item { animation: none !important; transform: none !important; opacity: 1 !important; } }（不重置 transform/opacity 会导致内容错位） - 列表项 >50 个时，别全开动画——用
IntersectionObserver只对进入视口的项启用 delay，否则低端机直接卡死 - 真正容易被忽略的是：动画触发时机。很多代码在 DOM 尚未完成渲染、样式尚未计算完毕时就设置了
animation-delay，结果首项 delay 为 0s 的动画已跑完，后续项才陆续开始。务必等所有元素挂载完成、样式 computed 后再统一加动画类或设内联 style。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
