animation-delay 多次设置会覆盖而非累加，浏览器仅采用最后一次生效值；JS 修改 style.animationDelay 会覆盖 CSS 声明；需手动计算总延迟或通过重排+重置 animation-name 触发重播；推荐用 CSS 自定义属性动态控制 delay。
animation-delay 多次设置会覆盖，不是累加
很多人以为连续给同一个元素多次设置 animation-delay（比如通过 class 切换或 style 修改），动画会“排队延迟”，实际是后一次直接覆盖前一次。浏览器只认当前生效的 delay 值，不会记住历史。
常见错误现象：element.style.animationDelay = '1s'; 之后又设为 '2s'，动画不会等 3 秒才开始，而是按最后的 2 秒延迟启动。
- CSS 中多个规则匹配时，以层叠优先级最高的那个
animation-delay为准 - JS 直接写
style.animationDelay会覆盖所有来自 CSS 的声明 - 如果想“追加延迟”，必须手动计算总延迟时间再赋值，不能依赖样式叠加
用 JavaScript 控制动画重播时避免延迟错乱
触发 animation 重播最稳妥的方式是强制重排（reflow）+ 重置 animation-name，而不是只改 animation-delay。否则可能因浏览器优化跳过重绘，导致延迟失效或动画不触发。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 先清空
animation-name（如设为''或'none'） - 触发重排：读取
offsetHeight或getComputedStyle(el).animationName - 再恢复
animation-name和目标animation-delay
示例片段：
function triggerAnimation(el, delay) {
el.style.animationName = 'none';
el.offsetHeight; // 强制重排
el.style.animationName = 'bounce';
el.style.animationDelay = delay + 's';
}
需要多次延迟触发？用 CSS 自定义属性 + @keyframes 动态控制
如果业务逻辑要求同一动画在不同条件下有不同延迟（比如按钮点击三次，分别延迟 0.5s / 1.2s / 2s 后执行），硬编码多个 class 维护成本高。更可持续的做法是用 CSS 自定义属性传参，配合 JS 动态更新。
