关键在于用同一 @keyframes 配合 animation-delay 错峰触发，延迟值应为 0s、0.2s、0.4s、0.6s 且动画周期≥0.6s，必设 animation-fill-mode:backwards，并用：nth-of-type 或明确 class 精准选点。
用 @keyframes 控制圆点跳动顺序的关键是延迟叠加
多个圆点依次跳动，本质不是“让每个圆点自己动”，而是让它们共用同一套动画逻辑，但起始时间错开。CSS 动画本身不支持“队列式触发”，只能靠 animation-delay 手动错峰。
常见错误是给每个圆点写不同 @keyframes，结果维护爆炸、时序难对齐；或者忘了重置 animation-fill-mode，导致第一帧卡住不动。
- 每个圆点必须有独立 class 或伪元素（比如
.dot:nth-child(1)），才能单独设animation-delay - 动画定义用一个通用
@keyframes bounce就够，不要为第 2 个点再写bounce2 - 务必加
animation-fill-mode: backwards，否则动画开始前圆点会保持初始状态（比如没缩放），跳动看起来像“突然弹出”
animation-delay 的值怎么算才不手抖
假设你想让 4 个圆点每隔 0.2s 跳一次，总周期 0.6s，那延迟值不是简单写 0s / 0.2s / 0.4s / 0.6s——因为动画会循环，第 4 个点如果设 0.6s 延迟，它实际和第 1 个点在下一周期里就撞上了。
真正要的是“视觉上等间隔启动”，所以延迟应为：0s、0.2s、0.4s、0.6s，但动画自身周期得 ≥ 最大延迟（即 ≥ 0.6s），否则会出现跳帧或重叠。
立即学习 “ 前端免费学习笔记（深入）”；
- 推荐把动画周期设成延迟步长 × 点数，比如 4 个点 × 0.2s = 0.8s，这样节奏最稳
- 如果用
%写延迟（如20%），会被当成相对于父容器的尺寸单位，直接报错——animation-delay只接受时间值（s或ms） - 用 CSS 变量可以简化调整：
--delay-step: 0.2s，然后animation-delay: calc(var(--delay-step) * 2)
用 :nth-child() 选圆点时容易漏掉的兼容性坑
看起来只是写几行选择器，但真实项目里常因 DOM 结构或浏览器行为翻车。比如你写了 .dots > span:nth-child(2)，结果第二项没动——大概率是前面插了注释、文本节点，或者用了 display: none 元素占了位置。
:nth-child 数的是所有兄弟节点，不是“第几个可见的 span”。想按实际渲染顺序选，得用 :nth-of-type 或干脆加明确 class。
- 如果圆点是用 JS 动态插入的，确保插入时顺序和预期一致，别依赖 DOM 加载顺序
- Safari 旧版本对
calc()在animation-delay中的支持不稳，calc(var(--d) * 3)可能被忽略，建议预计算好值 - 用
transform: scale(0.7)模拟“压下去”，别用height/width，避免触发布局重排影响性能
跳动动画卡顿？先关掉 will-change 和检查硬件加速
小圆点跳动卡，90% 不是代码问题，而是浏览器没走 GPU 合成。CSS 动画默认只在主线程跑，尤其涉及 transform 和 opacity 以外的属性时，很容易掉帧。
但乱加 will-change: transform 反而更慢——它会提前分配图层，内存占用飙升，低端机直接卡死。
- 只对真正需要动画的元素加
transform: translateZ(0)或will-change: transform，且动画结束后手动移除（用 JS 监听animationend） - 确认动画只改
transform和opacity：任何top、left、background-color都会强制重排重绘 - Chrome DevTools 的
Rendering面板打开Paint flashing，看跳动时有没有大面积绿色闪——有说明在频繁重绘
圆点跳动看着简单，真正调顺需要同时盯住时序逻辑、DOM 选择精度、GPU 合成路径三条线，缺一不可。最容易被忽略的是：动画延迟值和周期的数学关系，以及 :nth-child 在真实 HTML 结构里的“数人头”行为。
