animation-delay未生效主因是元素未触发重绘或初始不可见；多动画时各delay独立对应；js设置易被简写覆盖，推荐class控制；负值支持跳过前段实现无缝衔接。
animation-delay 设置后动画没延迟？检查是否触发了重绘
很多情况下写了 animation-delay: 2s，但动画一上来就跑，根本没等。这不是属性写错了，而是元素还没进入动画流程——animation 不会自动“预热”，它只在元素满足「样式变更 + 渲染上下文激活」时才真正计时。比如元素初始 display: none，后来用 JS 改成 block，此时即使带 animation-delay，浏览器也常从头开始渲染，忽略延迟。
- 确保元素初始是可见的（如
opacity: 1、visibility: visible），或通过transition或强制重排（如读取offsetHeight）触发样式计算后再加动画类 - 避免和
animation-fill-mode: forwards混用时误判：延迟期间元素仍保持初始状态，不是“卡住”，而是按规范本该如此 - 用 DevTools 的 Animations 面板看 timeline，确认 delay 时间段内 animation 状态是否为 “pending” 而非 “running”
多个动画同时设置 delay，时间是叠加还是独立？
animation-delay 是每个动画轨道独立生效的。如果你用逗号语法写多个动画，对应每个 animation-name，都要配一个 animation-delay 值，顺序一一对应，不叠加也不共享。
- 正确写法：
animation: slide 1s, fade 0.5s; animation-delay: 1s, 0.3s;→slide延迟 1 秒，fade延迟 0.3 秒 - 漏写会导致后面动画默认
0s，容易误以为“没生效” - 值数量不匹配时，多余 delay 被忽略，不足则循环补零（如只写一个
0.5s，两个动画都会用它）
用 JS 动态设置 animation-delay 为什么无效？
直接改 element.style.animationDelay = '1.5s' 多数时候能生效，但若之前 CSS 里已定义了 animation 简写属性，JS 设置的 delay 可能被覆盖——因为简写会重置所有子属性，包括未显式声明的 animation-delay。
- 优先用
animation简写完整声明（含 delay），或用CSS.setProperty()写入 style 属性 - 更稳妥的做法：用 class 控制 delay，JS 切换 class，把逻辑留在 CSS 里，避免简写冲突
- 注意单位：JS 中必须带单位（
'200ms'），写200会被当无效值丢弃
animation-delay 支持负值？有什么实际用处？
支持负值，而且很实用。负 delay 表示动画从中间某一帧开始播放，相当于“跳过前 N 秒”。比如 animation: spin 3s infinite; animation-delay: -1s;，动画会立刻从第 1 秒的位置开始转，视觉上像是已经转了 1 秒。
- 适合做无缝衔接的循环动画，比如轮播图入场时接续上一张的末尾状态
- 配合
animation-play-state: paused可实现“暂停在任意时刻”的效果 - 注意兼容性：IE 10+ 和所有现代浏览器都支持，但 Safari 旧版本（≤9）对负值解析有偏差，慎用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
