animation-delay为负值时动画从中间状态开始，非提前触发；多动画需显式声明各延迟值；父容器transform或will-change可能打乱时序；JS动态加class需强制重排或requestAnimationFrame确保样式生效。
animation-delay 值为负数时动画会从中间状态开始
当多个元素使用 animation-delay 排序但视觉顺序仍错乱，很可能是误用了负值。负的 animation-delay 不是“提前触发”，而是让动画从进度条的某个中间点切入——比如 animation-delay: -1s 在 2s 动画中，等价于从 50% 进度开始播放，首帧不是 from 关键帧。
- 只在需要“错峰启动”时用正值，如
animation-delay: 0.2s、0.4s - 避免负值，除非你明确要跳过前段动画（例如做循环衔接）
- 若需“倒序播放”，改用
animation-direction: reverse或重写关键帧
多个 animation 属性写在同一行时 delay 被覆盖
CSS 中如果用简写 animation 同时设置多个动画，但只写了部分参数，未显式声明的 animation-delay 会被重置为 0s，导致排序失效。
/* 错误：第二个动画没写 delay，实际变成 0s */
.element {
animation: slideIn 0.3s, fadeIn 0.4s;
}
<p>/<em> 正确：每个动画的 delay 都显式写出 </em>/
.element {
animation: slideIn 0.3s 0.2s, fadeIn 0.4s 0.5s;
}注意逗号分隔的每个动画片段，必须各自包含完整的时间参数（持续时间、延迟、次数等），否则浏览器按规范补默认值。
父容器 transform 或 will-change 触发渲染层叠，打乱动画时序
当父元素设置了 transform（如 translateZ(0)）或 will-change: transform，会强制创建独立合成层，子元素的动画可能被异步提交到不同图层，造成视觉上的“抢跑”或“卡顿”，看起来像顺序错乱。
立即学习“前端免费学习笔记（深入）”；
- 先检查父级是否无意中触发了层叠（用 Chrome DevTools 的 Layers 面板确认）
- 移除不必要的
transform或will-change，尤其在动画容器上 - 如必须开启硬件加速，改用
opacity+transform组合，并确保所有子动画都运行在同一合成层
JavaScript 动态添加 class 时样式未及时生效
用 JS 添加含 animation 的 class 后动画没按预期 delay 执行，常见原因是浏览器尚未完成样式计算——class 加了，但动画属性还没被识别为“新状态”。
element.classList.add('animate-slide');
// ❌ 立即触发，但可能跳过 delay
element.offsetWidth; // ✅ 强制触发重排，确保样式已就绪
element.classList.add('animate-slide');更稳妥的做法是用 requestAnimationFrame 或 setTimeout(..., 0) 延迟一帧：
element.classList.add('animate-slide');
requestAnimationFrame(() => {
element.classList.add('animate-slide'); // 确保在下一帧应用
});复杂交互动画中，delay 的精度依赖于样式计算与帧调度的配合，不能只靠 CSS 声明完事。
动画执行顺序真正卡住的地方，往往不在 animation-delay 数值本身，而在层叠上下文、样式生效时机和多动画简写覆盖这三处。调的时候先关掉 will-change，再逐个检查 animation 简写是否漏参数，最后用 DevTools 的 Rendering 面板看帧时间戳——顺序问题基本就定位出来了。
