animation-delay值相同但视觉不同步，主因是元素动画实际启动时机不一致，如DOM插入时间差、CSS类分批添加或JS动态修改初始状态导致浏览器延迟解析动画。
animation-delay 值相同但视觉上还是不同步？检查是否触发了重排或动画未同时启动
多个元素设置了相同的 animation-delay 和 animation-duration，却看起来“错开”了，大概率不是 CSS 写错了，而是它们的动画实际启动时机不一致。常见原因包括：元素在 DOM 中插入时间不同、CSS 类是分批添加的、或某个元素初始状态被 JavaScript 动态修改导致浏览器延迟解析动画。比如用 element.classList.add('animate') 给 3 个元素加类，如果这行代码在循环中执行且没做同步处理，浏览器可能在单次重绘中只触发部分动画。
- 确保所有动画元素在样式就绪后「同一帧」开始动画：用
getComputedStyle强制触发重排后再加类，或统一用requestAnimationFrame批量操作 - 避免在
DOMContentLoaded后立刻加动画类——此时元素可能还没完成布局计算，改用window.addEventListener('load', ...)或requestAnimationFrame - 确认没有其他 CSS 规则（如
opacity: 0+transition）干扰了初始渲染状态，造成动画起点偏移
animation-duration 一致但节奏仍不一致？留意 easing 和 fill-mode 的隐式影响
即使 animation-duration 都设为 1s，不同元素动画“感觉”快慢不一，往往是因为 animation-timing-function（easing）或 animation-fill-mode 不统一。例如一个用了 ease-in，另一个是默认 ease，起始加速度差异会让它们在前 0.2s 明显错位；又或者一个设了 animation-fill-mode: forwards 而另一个没设，会导致动画结束后状态不一致，影响下一轮同步。
- 显式声明所有关键属性：把
animation-timing-function、animation-fill-mode、animation-iteration-count全部写全，不要依赖浏览器默认值 - 用
steps(1, start)替代缓动函数可强制帧对齐（适合逐帧动画），但注意它会禁用插值 - 若需精确控制每帧行为，改用
@keyframes中定义 0% → 100% 的明确状态，避免依赖中间插值结果
需要真正硬同步？用 CSS 自定义属性 + 单一动画源驱动多个元素
最稳妥的方式不是给每个元素单独写 animation，而是用一个公共的 CSS 变量作为动画“时钟”，让所有元素监听同一个变化。这样哪怕 DOM 插入有延迟，只要变量更新发生在同一帧，动画响应就是同步的。
:root {
--sync-tick: 0;
}
.sync-element {
animation: sync-move 1s linear infinite;
animation-play-state: paused;
}
@keyframes sync-move {
0% { transform: translateX(calc(var(--sync-tick) 10px)); }
100% { transform: translateX(calc(var(--sync-tick) 10px + 100px)); }
}
/ JS 控制时钟 /
document.documentElement.style.setProperty('--sync-tick', Date.now() % 1000);
上面只是示意逻辑——实际中更推荐用 animation: sync-anim 1s steps(1) infinite 配合 JS 定时更新变量，或直接用 Web Animations API 的 document.timeline.currentTime 统一驱动。
立即学习“前端免费学习笔记（深入）”；
JavaScript 手动控制动画时 delay 精度不够？别用 setTimeout 模拟 delay
如果用 JS 给每个元素调用 element.animate(...) 并手动传 delay，哪怕数值一样，setTimeout 的最小粒度（通常 4ms）和事件循环抖动也会让实际启动时间偏差明显。这不是 CSS 问题，是 JS 计时模型的固有限制。
- 改用
element.animate(keyframes, { delay: 0, timeline: document.timeline })，让所有动画挂载到同一个时间轴上 - 避免混合使用 CSS 动画和 JS 动画控制同一元素，CSS 动画可能被 JS 强制中断并重置播放状态
- 调试时用 Chrome DevTools 的
Animations面板查看每个动画的「Start Time」和「Current Time」，比肉眼判断准得多
真正难的不是写对 animation-delay，而是让所有元素在同一渲染帧内进入「准备就绪」状态。DOM 插入顺序、样式计算时机、JS 执行队列，这些底层细节比 CSS 属性本身更容易成为同步瓶颈。
