用同一组@keyframes bounce实现三圆点错峰跳动，通过animation-delay设为-0.3s/0s/0.3s使相位差1/3周期，配合cubic-bezier(0.2,0.6,0.4,1)和0.6s时长达成自然弹跳效果。
用 @keyframes 做三个跳动圆点，关键在延迟错峰
三个圆点依次上下跳，不是靠 JS 控制节奏，而是用 CSS @keyframes + animation-delay 错开播放时机。每个点动画本身是同一套位移逻辑，差别只在启动时间。
- 动画主体用
transform: translateY()，比改top更性能友好，不触发重排 - 三个点必须共用同一组
@keyframes（比如叫bounce），否则维护成本翻倍 -
animation-delay设为-0.3s、0s、0.3s这类负值+正值组合，才能实现“无缝循环中的错峰” - 别用
margin-top模拟跳动——它会挤压父容器，且动画卡顿明显
圆点 DOM 结构要扁平，避免嵌套干扰 animation
如果把三个 span 套在一个 div 里再加动画，容易因父容器 overflow: hidden 或 transform 上下文导致位移截断。最稳写法是让每个点独立、同级、无额外包裹。
- 结构推荐：
<span class="dot"></span> <span class="dot"></span> <span class="dot"></span>
- 每个
.dot自己设display: inline-block和固定宽高，不依赖 flex 或 grid 对齐 - 禁用
vertical-align: middle等可能被继承覆盖的属性，统一用position: relative+top微调基线
动画时长与缓动必须匹配，否则跳得像卡顿
“跳动”感来自 cubic-bezier(0.2, 0.6, 0.4, 1) 这类先快后慢再回弹的曲线，不是 ease-in-out 那种匀称过渡。时长控制在 0.6s 左右最自然，太短像抖，太长像坠落。
-
animation-duration: 0.6s是实测较稳妥的值，配合animation-iteration-count: infinite - 缓动函数必须写全：用
cubic-bezier(0.2, 0.6, 0.4, 1)，别简写成ease—— 后者无法模拟真实弹跳惯性 - 三个点的
animation-delay差值应为总时长的 1/3（即0.2s），而不是随意填0.1s/0.2s/0.3s
IE11 兼容要手动补 -ms- 前缀，但别加错位置
IE11 支持 @keyframes 但要求带 -ms- 前缀，且只认 -ms-animation 复合属性，不认拆开的 animation-name 等单属性。
立即学习“前端免费学习笔记（深入）”；
-
@-ms-keyframes bounce { ... }必须和标准@keyframes bounce并存 - 元素上要同时写：
animation: bounce 0.6s infinite;和-ms-animation: bounce 0.6s infinite; - 别给
-ms-animation-delay单独加前缀——IE11 不支持，写了反而让整条规则失效 - 移动端 Safari 旧版（iOS 9）需要
-webkit-前缀，但只需加在@keyframes和animation属性上，不用补全所有子属性
animation-delay 的负值用法：它让动画从中间某一帧开始播，才能实现“三个点永远处于不同相位”的视觉效果。很多人卡在这里，反复调 0s、0.2s、0.4s 却得不到连贯波浪感。 
