animation-delay用于设置动画首次播放前的延迟时间，仅错开起点而不暂停或中断动画；可为负值实现中途开始，需配animation-fill-mode: backwards避免闪动。
animation-delay 控制单个动画的启动时机
设置 animation-delay 就是告诉浏览器：“这个动画别急着播，等 X 秒后再开始”。它只影响当前元素上该动画的首次触发时间，不影响后续循环（除非配合 animation-iteration-count 和 animation-direction 做复杂编排）。
常见错误是把它当成“暂停整个动画流程”的开关——其实它不暂停、不中断、也不改变动画本身持续时间（animation-duration），只是错开起点。
-
animation-delay可为负值，比如-0.5s表示动画从第 -0.5 秒开始，即直接播放到中途状态（常用于无缝衔接或预加载视觉） - 单位必须显式写出，
animation-delay: 2无效，要写成animation-delay: 2s或animation-delay: 200ms - 若同时定义多个动画（用逗号分隔），
animation-delay也需用逗号对应提供，否则未指定项默认为0s
多个元素按顺序依次播放动画的实操写法
想让列表项一个接一个动起来，核心不是靠 JS 控制，而是给每个 <li> 设置递增的 animation-delay。关键在于：延迟值 = 序号 × 单个动画时长（或略小一点，实现重叠效果）。
例如 4 个卡片，每个动画持续 0.3s，想逐个延迟出现：
立即学习“前端免费学习笔记（深入）”；
li:nth-child(1) { animation-delay: 0s; }
li:nth-child(2) { animation-delay: 0.3s; }
li:nth-child(3) { animation-delay: 0.6s; }
li:nth-child(4) { animation-delay: 0.9s; }更灵活的做法是用 CSS 自定义属性 + calc：
:root { --item-delay: 0.3s; }
li { animation-delay: calc((var(--item-index) - 1) * var(--item-delay)); }注意：--item-index 需在 HTML 中手动设为 style="--item-index: 1" 等，CSS 本身无法自动获取序号。
动画延迟与 animation-fill-mode 的配合要点
只设 animation-delay 往往不够——动画开始前元素会保持初始样式，可能造成“闪一下才动”的观感。这时候必须配 animation-fill-mode: backwards，让元素在延迟期间就应用动画第一帧的样式。
- 没加
backwards：延迟时显示原始状态，到时间点突然跳到动画起始态，再开始动 → 明显卡顿感 - 加了
backwards：延迟期间就“冻住”在@keyframes的0%状态，时间一到自然过渡 → 视觉连贯 - 若还希望动画结束后保持最后一帧，得补上
animation-fill-mode: both（backwards+forwards）
用 animation-delay 实现循环队列式轮播的限制
单纯靠 animation-delay 拼多个动画，无法真正实现“无限循环队列”效果（比如 5 个 item 持续轮流入场）。因为 CSS 动画本身没有“链式触发”或“事件回调”，所有动画都是独立并行启动的。
如果硬要用纯 CSS 实现类似效果，得借助以下技巧：
- 把全部动画合并进一个
@keyframes，用精确的时间点控制每个 item 的 opacity/transform，靠animation-duration覆盖整轮周期 - 用
animation-delay配合极长的animation-duration（如100s），在 keyframes 里做多段位移，但维护成本高、时间精度难控 - 真要动态控制顺序或响应用户交互，还是得交由 JS 管理 class 切换，
animation-delay只负责微调节奏
最易忽略的一点：当父容器有 overflow: hidden 且子元素靠 transform 进场时，animation-delay 的负值可能导致元素在可视区外就已“提前渲染”，引发意外重绘或 GPU 内存占用升高。调试时建议打开开发者工具的“Rendering > Paint flashing”观察实际绘制范围。
