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 动态更新。
注意点：
- 自定义属性本身不触发重绘，必须搭配依赖它的
@keyframes或动画属性变化（如animation-duration）才能生效 -
animation-delay支持使用var(--delay)，但该变量必须已在作用域中声明且可被解析 - 不要在
@keyframes内部用var()控制关键帧位置（不被支持），只用于控制 delay、duration 等动画时序参数
示例：
el.style.setProperty('--delay', '1.5');
对应 CSS：
.animatable {
--delay: 0;
animation: slide 0.3s ease-out var(--delay);
}
监听 animationend 后再次触发需防抖和状态同步
用 animationend 回调触发下一次延迟动画时，容易忽略两个现实问题：一是动画可能被 animation-play-state: paused 中断，二是快速连续触发会导致事件堆积、delay 计算错位。
关键处理点：
- 在回调里移除事件监听器，或用
{ once: true }选项 - 用布尔标志位（如
isAnimating）阻止重复进入触发逻辑 - 如果 delay 是基于时间戳动态计算的，确保用
Date.now()而非固定数值，避免系统时间跳变影响
延迟本身不难，难的是在 JS 与 CSS 交界处保持状态一致——这里最容易漏掉的是动画被取消后的清理动作。
