animation-delay 对每个元素独立生效，仅影响自身绑定的动画；多个动画需用逗号对应延迟值；动态添加类时须包含完整 animation 声明；JS 修改 delay 需配合 play-state 重置或强制重流。
多个元素用不同 animation-name 时，animation-delay 是独立生效的
每个元素的 animation-delay 只影响它自己绑定的动画，不会干扰其他元素。只要给每个元素单独写 CSS 规则，或通过类名/属性选择器区分，就能让它们各自按需延迟启动。
常见错误是误以为所有动画共用一个计时上下文，其实浏览器为每个元素的每个动画实例维护独立的播放状态。
-
animation-delay的值支持s（秒）和ms（毫秒），注意单位必须显式写出，0可省略单位但0.5必须写成0.5s - 如果元素有多个动画（逗号分隔的
animation-name），animation-delay也需用逗号对应，否则会循环复用 - 动态添加类触发动画时，要确保类中包含完整的
animation声明（含delay），仅改animation-play-state不会重置延迟
用 CSS 类批量控制不同元素的动画起始时间
最稳妥的方式是为每组行为定义明确的类，比如 .fade-in-1s、.slide-up-300ms，避免在 JS 中拼接内联样式导致维护困难。
.box-a { animation: fade 0.3s ease-out 0.2s; }
.box-b { animation: slide 0.4s cubic-bezier(0.2, 0.8, 0.4, 1) 0.6s; }
.box-c { animation: pulse 1.5s infinite 1.2s; }
这样既可读又便于调试：在 DevTools 中一眼看出哪个元素延后了多久、用的是哪个关键帧。
立即学习“前端免费学习笔记（深入）”；
- 延迟值建议统一用
s单位，避免300ms和0.3s混用造成计算误差 - 如果多个元素需“错峰”播放（如依次延迟 0.1s），可用 CSS 自定义属性 +
calc()动态生成，但要注意兼容性（IE 不支持）
JS 控制动画延迟时，animation-delay 要配合 animation-play-state 重置
直接改 element.style.animationDelay = '0.8s' 不会重新触发动画——它只改变下次播放的延迟，而当前动画可能已在运行中。真正生效需要先暂停再恢复，或强制重流。
- 安全做法：先设
animation-play-state: paused，再改animation-delay，最后设回running - 更简单粗暴：临时移除 class 再加回，或修改
animation属性字符串（含 name + duration + delay），触发浏览器重建动画实例 - 注意：频繁操作
style.animation可能引发 layout thrashing，复杂场景建议用requestAnimationFrame批量处理
动画同时播放但节奏不同，重点检查 animation-duration 和 animation-timing-function
即使所有元素的 animation-delay 都是 0s，它们看起来“不同步”往往是因为持续时间或缓动函数差异太大。比如一个 2s 的 ease-in 和一个 0.5s 的 linear，视觉上完全不是一回事。
- 调试时打开 Chrome DevTools 的「Animations」面板，可逐帧查看各元素动画的实际起止时间与速率曲线
- 若需严格同步（如 loading 骨架图中多个色块脉冲一致），应统一
animation-duration和animation-timing-function，只靠animation-delay错开相位 - 慎用
animation-iteration-count: infinite配合不同delay—— 第二轮开始后，各元素周期不再对齐，容易产生意外节奏
animation-delay 可能被忽略或表现异常。这时候加个 requestAnimationFrame 或微任务延迟设置类更可靠。 
