应使用CSS自定义属性配合:nth-child()动态设animation-delay，如--delay: 0s/0.15s/0.3s/0.45s，并确保单位显式（0.2s而非.2s）、起始状态写在默认样式、避免animation简写覆盖、JS控制时用requestAnimationFrame节流。
animation-delay 值怎么设才让元素真正“交错”动起来
直接给 animation-delay 加递增数值（比如 0.1s、0.2s、0.3s）看似合理，但实际常出现“卡顿感”或“动不齐”，根本原因是没对齐动画周期和触发时机。
真实场景里，交错动效要的是视觉节奏感，不是机械等差。建议用 CSS 自定义属性 + :nth-child() 动态计算：
li {
animation: fadeUp 0.4s ease-out forwards;
}
li:nth-child(1) { --delay: 0s; }
li:nth-child(2) { --delay: 0.15s; }
li:nth-child(3) { --delay: 0.3s; }
li:nth-child(4) { --delay: 0.45s; }
li { animation-delay: var(--delay); }
- 别用 JS 动态加
style.animationDelay—— 触发重排，尤其列表长时明显掉帧 - 延迟值建议不超过单次动画时长的 1.2 倍，否则后几个元素进场太晚，用户已划走
- 如果用
@keyframes做位移类动画，起始状态（transform: translateY(20px)）必须写在元素默认样式里，不能只靠动画第一帧定义，否则会闪一下
多个 animation-delay 同时存在时谁生效
当一个元素同时有多个动画（比如 slideIn 和 fadeIn），每个动画可独立设 animation-delay，互不干扰。但容易踩坑的是：用简写 animation 覆盖时，会把 delay 也重置。
错误写法：animation: slideIn 0.3s; → 这会清空之前设的 animation-delay
立即学习“前端免费学习笔记（深入）”；
- 想保留 delay，必须显式写出：
animation: slideIn 0.3s ease-out 0.2s forwards; - 或者拆开写：
animation-name: slideIn;+animation-duration: 0.3s;+animation-delay: 0.2s; - 用
animation: none临时停动画？注意它也会清除animation-delay，恢复时得重新设
animation-delay 在 Safari 上不生效的常见原因
Safari（尤其是 iOS 15–16）对 animation-delay 的解析更严格，不是 bug，是规范执行更死板。
- 单位必须显式写出：
animation-delay: .2s会失效，得写成animation-delay: 0.2s - 如果动画名拼错（比如
@keyframes fadeInn但调用fadeIn），Chrome 可能静默忽略，Safari 直接不触发 delay 甚至整个动画 - 父容器用了
will-change: transform，某些旧版 Safari 会跳过 delay 计算，临时去掉试试 - 用
prefers-reduced-motion媒体查询时，别只关动画，也要同步设animation-delay: 0s，否则 delay 还在，但动画被禁，变成“卡住等 0.3s 后突然显示”
用 JS 控制 animation-delay 时怎么避免布局抖动
需要动态控制延迟（比如根据滚动位置调整）时，直接改 element.style.animationDelay 很容易触发 layout thrashing。
- 优先用 CSS 自定义属性：
el.style.setProperty('--delay', '0.25s')，再在 CSS 里用animation-delay: var(--delay) - 如果必须用 JS 设原生属性，把所有 delay 更新包进
requestAnimationFrame，避免连续强制同步样式计算 - 别在
scroll事件里实时设 delay —— 改成节流后每 60ms 最多更新一次，人眼根本看不出差别 - 移动端要注意：iOS Safari 对频繁修改
animation-delay更敏感，配合transform: translateZ(0)强制硬件加速反而可能加重卡顿，不如老老实实用opacity+transform组合
最麻烦的其实是动画复用：同一套 @keyframes 用在不同组件里，delay 逻辑分散在 CSS、JS、甚至 inline style 中，后期改节奏时全得手动对齐。真要长期维护，建议把 delay 计算逻辑收口到一个 CSS 类生成器里，哪怕只是个简单函数。
