animation-delay 控制动画开始前的等待时长，不影响持续时间与重复次数；可为正、负或零，需配合 animation-name 和 animation-duration 使用，单位必须明确；负值使动画从中段切入，多动画时支持逗号分隔列表且须与 animation-name 顺序一致。
animation-delay 设置的是动画开始前的等待时长
它不会影响动画持续时间或重复次数，只控制从元素渲染完成到动画第一帧播放之间的空闲间隔。这个值可以是正数（延迟执行）、负数（倒播切入）或 0（立即开始）。
-
animation-delay必须和animation-name、animation-duration一起使用才生效，单独写无效 - 单位必须明确，比如
1s或500ms，不能只写1 - 负值会让动画从中间某一帧开始播放，例如
animation-delay: -1s在animation-duration: 2s下，等价于跳过前半段直接从 50% 进度进入
多个动画同时设置不同 delay 的写法
当一个元素应用了多个 @keyframes 动画时，animation-delay 支持用逗号分隔的列表，顺序需与 animation-name 严格对应。
div {
animation-name: slide, fade;
animation-duration: 1s, 0.6s;
animation-delay: 0.3s, 0.8s;
}
上面代码中，slide 动画在元素渲染后 300ms 开始，fade 则等待 800ms 后启动。如果两个动画的 delay 值相同，也可以合并为单个值：animation-delay: 0.5s。
animation-delay 为负数时的实际表现
负延迟不是“提前播放”，而是让动画从某个中间状态切入。浏览器会按比例计算起始位置：假设 animation-duration: 2s，animation-delay: -0.5s，则动画从 25% 进度处开始播放（0.5 / 2 = 0.25）。
立即学习“前端免费学习笔记（深入）”；
- 适用于做“无缝衔接”效果，比如轮播图切换时让新项从中间滑入
- 注意：若关键帧中用了
transform或opacity等属性，负 delay 会导致初始态不等于 CSS 中定义的样式，可能造成闪动 - 调试时可配合
animation-play-state: paused暂停动画，再用开发者工具拖动时间轴观察起始点
JS 动态修改 animation-delay 容易忽略的细节
通过 JS 修改 style.animationDelay 是可行的，但要注意触发时机和重排问题。
- 直接赋值字符串，如
el.style.animationDelay = '0.4s'，不要漏掉单位 - 如果想让新 delay 生效，需确保动画已处于暂停或已完成状态；否则可能被当前正在运行的动画实例忽略
- 更稳妥的做法是先移除动画类，
offsetHeight强制重排，再加回带新 delay 的类
el.classList.remove('animated');
el.offsetHeight; // 触发重排
el.classList.add('animated-delayed');
CSS 动画的延迟逻辑看似简单，但负值行为、多动画对齐、JS 动态更新这三处最容易出意料之外的效果。 
