必须用 animation-delay 精确对齐多个动画启动时机，且满足三条件：延迟值与前一个动画 duration 严格相等、所有动画声明合并为单行逗号分隔、animation-fill-mode 必须配对使用，否则出现闪回或空档。
直接用 animation-delay 控制多个动画的启动时机，但必须满足三个硬性条件：延迟值要和前一个动画的 animation-duration 精确对齐、所有动画声明必须合并为单条逗号分隔语法、animation-fill-mode 必须配对使用，否则必然出现闪回或空档。
animation-delay 值怎么设才不翻车
它不是“大概等一下”，而是精确时间点对齐。比如第一个动画 fade-in 0.3s，第二个动画想紧接其后，animation-delay 就必须是 0.3s，写成 0.29s 或 0.31s 都会出问题——前者重叠，后者留白。
- 单位统一用
s，除非你真需要 10ms 级别精度（此时才用ms） - 小数点后最多保留 2 位，如
0.25s；0.250s反而可能触发渲染引擎解析抖动 - 如果动画带
animation-iteration-count: infinite，animation-delay只影响首次启动，后续循环不受影响 - 动态插入的元素（如 JS
appendChild），必须确保 DOM 已挂载后再加动画类，否则animation-delay不触发
多个 animation 声明为什么只生效一个
浏览器只认最后一个 animation 声明，前面的全被丢弃。写两行 animation: fade-in 0.3s; 和 animation: slide-up 0.4s 0.3s; 是无效的。
- 必须合并为一行，用逗号分隔：
animation: fade-in 0.3s ease, slide-up 0.4s ease 0.3s; - 每个动画的参数顺序固定：name → duration → timing-function → delay → fill-mode → iteration-count
-
animation-fill-mode、animation-timing-function等属性也得一一对应，错一位就全乱套 - 如果两个动画都改
transform，后启动的那个会覆盖前一个的终态，导致“闪回”
为什么加了 delay 还是“闪一下才动”
这是没配 animation-fill-mode: backwards 的典型表现。只设 animation-delay: 0.5s，元素在 0–0.5s 期间仍显示原始样式，到 0.5s 瞬间跳到动画第一帧，再开始播放。
立即学习“前端免费学习笔记（深入）”；
-
animation-fill-mode: backwards必须和animation-delay同时存在才生效 -
animation-fill-mode: forwards几乎必加，否则动画播完立刻回退到初始样式，位移/缩放/透明度变化全丢失 - 若动画起始态和默认态一致（比如都是
opacity: 1），backwards效果不可见，但逻辑上仍建议保留 - 多个动画链式执行时，
forwards只固化当前动画最后一帧，不能跨动画继承状态
如何用 CSS 变量统一管理延迟节奏
手算一串 0.3s、0.6s、0.9s 容易出错，尤其当持续时间调整时。变量能避免浮点误差累积，且改一次就能全局同步。
- 在根或父容器定义：
:root { --anim-step: 0.3s; } - 子元素用
calc()推导：.item:nth-child(1) { animation-delay: calc(var(--anim-step) * 0); } - 不要用
nth-of-type混用其他兄弟元素，优先用nth-child或显式类名保证顺序可靠 - 延迟值建议控制在
0.1s–0.3s区间：太小看不出顺序，太大显得拖沓
真正难的不是写对某一行代码，而是所有动画的时间轴必须手动对齐、所有 fill-mode 必须按需配对、所有声明必须合并且顺序严格——漏掉任意一环，视觉就会崩。
