要让多个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 内部，所以动画逻辑本身仍需写死，但时序参数可外部驱动。
立即学习“前端免费学习笔记（深入）”；
animation-play-state 和 JS 触发时的同步陷阱
如果用 JavaScript 控制 animation-play-state: paused/running 来启停动画，多个元素即使初始 animation-delay 和 animation-duration 一致，也可能因 JS 执行微时差或重排时机不同而失步。
更稳妥的做法是：
- 用
element.classList.add('animate')触发，CSS 中用.animate { animation: ... }定义，避免内联样式干扰层叠 - 所有要同步的元素在同一个
requestAnimationFrame回调里添加 class - 避免混合使用
animation和transition控制同一属性，否则时序不可控
浏览器重绘与动画帧精度的现实限制
即便参数完全一致，CSS 动画也无法保证像素级帧同步——因为浏览器按 vsync 节奏调度重绘，且每个元素的布局计算、图层合成可能略有先后。肉眼可见的“不同步”，往往不是配置错，而是：
- 某些元素触发了 layout（如宽高依赖内容），导致首帧渲染延迟
- 用了
transform: translateZ(0)或will-change: transform但未提前声明，造成图层提升时机不一致 - 动画属性涉及
height/opacity等非合成属性，强制触发重排重绘
真正需要严格帧同步的场景（比如交互动画序列），建议用 Web Animations API 配合 document.timeline.currentTime 手动锚定起始时间点，CSS 声明式动画更适合独立、松耦合的动效。
