三个点逐帧跳动效果本质是错开节奏的垂直位移，需用@keyframes定义单点动画并为每个点单独设置animation-delay，配合伪元素生成点、rem/ch单位响应式适配及GPU加速优化。
用 @keyframes 定义三个点的逐帧位移
跳动效果本质是三个 . 字符（或伪元素）在垂直方向上按顺序起伏，不是同时上下。关键不是“动”，而是“错开节奏”。直接写 transform: translateY() 不够，必须用 @keyframes 分三段控制：第一个点先升、第二个稍后、第三个再晚一点。
常见错误是把三个点写成同一个动画实例，结果一起弹——得给每个点单独设 animation-delay。比如：
@keyframes dot-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
然后分别作用在三个 ::after 上，延迟值设为 0s、0.2s、0.4s。
用 ::after 伪元素生成点，避免 HTML 冗余
不用在 HTML 里写三个 <span>.</span>，既难维护又增加语义噪音。纯 CSS 就能搞定：给容器加一个类，用 ::after 生成内容，再通过 content 和 letter-spacing 控制点间距。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
display: inline-block让伪元素可定位，否则transform可能不生效 - 三个点用同一伪元素 +
content: "..."最省事，但无法单独控制每个点的动画——所以更推荐三个独立伪元素：::after、::before、:first-line不靠谱，改用div::before+div::after+div > span:first-child组合 - 如果用字体图标或 SVG 替代文本点，注意
vertical-align值，不然跳动会偏移基线
animation 的循环与延迟参数必须配对写死
只写 animation: dot-bounce 1.2s infinite 是不够的。三个点要“错开跳”，就得显式补全所有参数，尤其是 animation-delay 和 animation-duration 必须一致，否则节奏乱。
典型写法：
.loader::before { animation: dot-bounce 1.2s infinite 0s ease-in-out; }
.loader::after { animation: dot-bounce 1.2s infinite 0.2s ease-in-out; }
.loader > span { animation: dot-bounce 1.2s infinite 0.4s ease-in-out; }
容易踩的坑：
- 漏写
infinite，动一下就停 - 把
0.2s写成.2s，部分旧版 Safari 不认 - 用
ease而非ease-in-out，上升和回落不对称，看着“卡” - 没设
animation-fill-mode: both，初始态可能空白一帧
移动端小屏下点太密或跳幅过大怎么办
在 iPhone 或折叠屏上，translateY(-8px) 可能显得太猛，而 letter-spacing: 4px 又让点挤成一团。这不是动画逻辑问题，是响应式适配缺失。
解决方式很直接：
- 用
rem或em替代px，比如transform: translateY(-0.5rem)，随根字号缩放 - 在
@media (max-width: 480px)里重置animation-duration到1s，减缓节奏，降低视觉干扰 - 点间距改用
ch单位：letter-spacing: 1.2ch，更贴合字符宽度 - 真遇到 iOS Safari 动画掉帧，加
transform: translateZ(0)强制 GPU 加速（但别滥用，可能引发渲染层爆炸）
最常被忽略的是：动画时间值和延迟值之间得保持比例稳定。比如主时长缩到 1s，那延迟就得对应变成 0s / 0.17s / 0.33s，不能还沿用 0.2s 和 0.4s——节奏一塌糊涂。
