要让多个CSS动画不“错拍”，需确保所有动画的起始时间（animation-delay）和持续时间（animation-duration）均一致，使播放窗口完全对齐；推荐用CSS自定义属性统一管理时序参数，并避免JS启停导致的微时差失步。
animation-delay 和 animation-duration 怎么配才不“错拍”
关键不是把两个值设成一样，而是让所有动画的「播放窗口」对齐——即 animation-delay + animation-duration 的和决定结束时刻，而起始时刻由 animation-delay 单独控制。如果想让多个元素从同一帧开始、同一帧结束，必须保证：起始时间一致（animation-delay 相同），且持续时间也一致（animation-duration 相同）。
常见错误是只调 animation-duration，却忽略 animation-delay 差异导致视觉脱节。比如一个元素 animation-delay: 0.2s，另一个是 animation-delay: 0s，哪怕时长都是 1s，它们实际播放区间分别是 0.2–1.2s 和 0–1s，根本不同步。
用 CSS 自定义属性统一管理更可靠
硬编码每个元素的 animation-delay 和 animation-duration 极易出错，尤其当需要批量调整或响应式切换时。推荐用 CSS 自定义属性集中控制：
:root {
--anim-duration: 0.6s;
--anim-delay: 0.3s;
}
.element-a {
animation: slideIn var(--anim-duration) ease-out var(--anim-delay);
}
.element-b {
animation: fadeIn var(--anim-duration) linear var(--anim-delay);
}
这样改一次变量，所有元素自动对齐。注意：自定义属性不能直接用于 @keyframes 内部，所以动画逻辑本身仍需写死，但时序参数可外部驱动。
立即学习“前端免费学习笔记（深入）”；
