三个点必须分别设置 animation-delay 才能实现错位跳动效果，否则会同步起跳；推荐延迟值为 0s、0.2s、0.4s，配合包含三帧的 @keyframes（含向上抬升与微缩放）及 display、animation 简写等必要样式条件。
直接用 transform: translateY() 配合 animation-delay 就能做出错位跳动的省略号效果，不需要 JS，但三个点必须独立控制延迟，否则会一起弹。
为什么三个点要分别设 animation-delay
常见错误是给三个 <span></span> 或 ::after 元素套同一个动画类，结果同步起跳——视觉上就是“一齐蹦”，不是“依次跳”。本质是动画触发时机完全一致，浏览器不会自动错开。必须手动用 animation-delay 拉开时间差，才能模拟真实打字机或加载中的节奏感。
- 第一个点延迟
0s，第二个点0.2s，第三个点0.4s是较自然的间隔 - 延迟值不宜超过
0.6s，否则等待感过强，像卡顿 - 若用伪元素
::after，需确保父元素有position: relative，否则top/transform定位可能失效
@keyframes dot-bounce 的关键帧怎么写才不僵硬
只写两帧（0% 和 100%）会变成生硬上下抖，缺乏弹性。真正“跳动”需要中间有一个明确的最低点，并配合轻微缩放强化物理反馈。
- 推荐写法：
0%, 100% { transform: translateY(0); }（起始/结束位置） -
50% { transform: translateY(-8px) scale(1.05); }（最高点抬升 + 微膨胀，不是最低点） - 注意：这里
-8px是向上位移，和“跳起”直觉一致；若写+8px反而像被往下砸 - scale 值建议在
1.03–1.08之间，太大失真，太小无感
HTML 结构与 CSS 绑定容易漏掉什么
结构看着简单，但几个隐性条件不满足，动画就静止不动：
- 必须显式设置
display: inline-block或display: block，inline元素默认不响应transform -
animation简写属性里至少含时长和迭代次数，例如：animation: dot-bounce 1s infinite；只写animation: dot-bounce不生效 - 移动端 Safari 旧版本（iOS 15.4 以下）仍需加
-webkit-animation前缀 - 如果用
visibility: hidden控制显隐，动画会暂停；应改用opacity: 0+pointer-events: none或切换display
抖动提示和跳动加载别混用
抖动（shake）是失败反馈，跳动（dot-bounce）是等待提示，二者目的、节奏、位移方向都不同。拿抖动动画直接套在加载点上，会让人误以为操作出错了。
- 抖动是水平反复位移（
translateX），通常0.4s播 2 次 - 跳动是垂直单向运动（
translateY），周期在0.8–1.2s，无限循环 - 共用同一组 keyframes 名称（如都叫
jump）会导致样式覆盖，务必命名隔离
真正难的不是写几行 @keyframes，而是让三个点在不同设备上都保持节奏稳定——延迟值得用 s 而不是 ms，避免小数点后太多位导致解析误差；动画时长别依赖系统帧率，优先选 1s 这类整数周期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
