animation-delay用于设置CSS动画开始前的等待时间，支持s/ms单位及负值；可与多动画组合使用，需注意参数顺序和声明方式；区别于transition-delay，后者仅作用于属性过渡且不支持循环。
animation-delay 设置动画延迟时间
CSS 动画的延迟执行，核心就是 animation-delay 这个属性。它定义动画在开始播放前等待的时间，单位可以是 s 或 ms，支持负值（负延迟会让动画从中间某一帧开始播放）。
- 正数延迟：比如
animation-delay: 0.5s，表示动画在样式生效后等 500 毫秒再启动 - 负数延迟：比如
animation-delay: -1s，表示动画直接从第 1 秒处的画面开始播放（前提是动画时长 ≥ 1s） - 可与
animation-name、animation-duration等组合使用，单独设animation-delay不会触发动画
多个动画如何分别设置不同延迟
当一个元素同时应用多个 @keyframes 动画时，需用动画全写语法或分开声明，避免延迟被覆盖。
div {
animation:
slideIn 0.6s ease-out 0.2s forwards,
fadeIn 0.4s ease-in 0.5s forwards;
}
上面写法中，slideIn 在 0.2s 后开始，fadeIn 在 0.5s 后开始 —— 注意逗号分隔、每个动画的四个参数顺序固定：name duration timing-function delay。
- 如果用简写
animation，必须保证每个动画的参数数量一致，否则解析失败，浏览器可能只执行第一个动画 - 也可拆成多行写（更清晰）：
animation-name: slideIn, fadeIn;+animation-duration: 0.6s, 0.4s;+animation-delay: 0.2s, 0.5s; - 别漏掉
forwards等填充模式，否则延迟结束后元素可能闪回初始状态
transition-delay 和 animation-delay 的区别
容易混淆的是 transition-delay，它只对 CSS 属性变化（如 hover 改 opacity）起作用，不是真正意义上的“动画”，也不支持关键帧。
立即学习“前端免费学习笔记（深入）”；
-
transition-delay: 0.3s只在触发过渡（比如鼠标移入）之后等 0.3s 才开始渐变，且只生效一次 -
animation-delay: 0.3s是为整个@keyframes动画设定启动偏移，可配合animation-iteration-count: infinite循环，每次循环都受该延迟影响（除非设为animation-fill-mode: backwards） - 二者不能混用在同一个动画逻辑里；想做延迟入场 + 循环动效，必须用
animation系列属性
延迟失效的常见原因
写了 animation-delay 却没看到延迟效果？大概率是以下几类问题：
- 忘记写
animation-duration：没有时长，动画默认为 0s，延迟自然不可见 - 父元素或自身有
display: none：元素未渲染，动画计时器不启动；改用visibility: hidden或opacity: 0配合animation-fill-mode: forwards - JS 动态加 class 时机太早：比如在 DOM 插入后立刻加动画 class，但此时样式尚未计算完成；可包一层
requestAnimationFrame或用setTimeout(..., 0)错峰触发 - 浏览器兼容性：IE10+ 支持标准
animation-delay，但旧版 Safari 需要-webkit-animation-delay前缀（现在基本可忽略）
延迟本身很简单，但和渲染时机、样式优先级、JS 执行节奏搅在一起时，最容易卡住——调试时先确认动画是否真被触发（DevTools 的 Animations 面板能直观看到计时器状态）。
