animation-delay需与前一个animation-duration精确对齐，推荐用css变量统一管理节奏，多动画须合并声明、一一对应属性，避免同属性冲突导致“闪回”，js动态添加时需强制重排或仅切换类名。
animation-delay 值怎么设才不翻车
直接写 animation-delay: 0.3s 很容易出问题——延迟值必须和前一个动画的 animation-duration 精确对齐，否则会出现空档或重叠。比如第一个动画持续 0.4s，第二个却设了 0.35s 延迟，就会提前切入；设成 0.45s 又会留白。
实操建议：
- 用变量统一管理节奏：在父容器定义
--anim-step: 0.2s，子元素用animation-delay: calc(var(--anim-step) * 0)、calc(var(--anim-step) * 1)递推，避免手算出错 - 延迟单位优先用
s，不用ms（除非精确到 10ms 级别），小数点后最多保留 2 位，如0.25s，避免渲染引擎解析抖动 - 如果动画本身带
animation-iteration-count: infinite，延迟只影响首次启动，后续循环不受影响
多个 animation 属性并列时的逗号规则
CSS 多动画并行或衔接，必须用多值语法，不能靠两个独立的 animation 声明覆盖。浏览器只会认最后一个 animation 声明，前面的被丢弃。
错误写法：.box { animation: fade-in 0.3s; animation: slide-up 0.4s 0.3s; }
正确写法是合并为一行，用逗号分隔各动画参数：
`.box {
animation-name: fade-in, slide-up;
animation-duration: 0.3s, 0.4s;
animation-delay: 0s, 0.3s;
animation-fill-mode: forwards, forwards;
}`
注意：animation-fill-mode、animation-timing-function 等也得一一对应，顺序错一位就全乱套。
为什么加了 forwards 还是“闪回”
常见现象：动画播完，元素突然跳回初始位置或透明度归零。这不是 animation-fill-mode: forwards 没生效，而是它只对当前动画的最后一帧起作用——如果多个动画修改同一属性（比如都改 transform），后启动的动画会覆盖前一个的终态。
关键点：
- 避免多个动画同时驱动
transform：把位移、旋转、缩放全写进同一个@keyframes里，而不是拆成move+rotate两个动画 - 如果必须分动画，确保它们控制不同属性：一个只动
opacity，另一个只动transform，互不干扰 -
forwards对opacity安全，但对top/left这类触发布局的属性效果不可靠，务必改用transform
JS 动态加动画类时 delay 不生效
用 el.classList.add('animate-slide') 触发 CSS 动画，但发现 animation-delay 像没起作用——大概率是浏览器把“添加类”和“重绘”压进了同一帧，delay 来不及计时就被跳过。
解决办法只有一步：
加个微任务断点，让类名变更和样式计算分帧执行：
el.classList.add('animate-slide');
// 强制触发重排前的样式计算
void el.offsetWidth;
// 再让动画真正开始
setTimeout(() => {
el.style.animationDelay = '0.2s';
}, 0);
更稳妥的做法是：初始状态就写好所有动画规则（含 delay），JS 只负责开关 is-active 类，不中途改 style.animationDelay。
最易被忽略的是：多个动画共用同一组 @keyframes 名称时，后定义的会静默覆盖前面的——哪怕文件分开引入。检查开发者工具的 “Styles” 面板里实际生效的关键帧名称，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
