三个点依次跳动的核心逻辑是共用同一@keyframes动画，仅通过animation-delay（0s、0.2s、0.4s）错开启动时机，配合infinite循环与恰当的duration（如1s），实现简洁可维护的节奏队列。
用 @keyframes 实现三个点依次跳动的核心逻辑
三个点跳动不是靠“随机延时”，而是让每个点复用同一段动画，但用 animation-delay 错开启动时机。关键在于：三个点必须使用相同 animation-name 和相同动画曲线（比如 ease-in-out），仅靠 animation-delay 形成节奏差。
常见错误是给每个点写三段不同 @keyframes，既冗余又难维护；或者误以为 animation-delay 能控制单次循环内的延迟——它只控制动画第一次播放前的等待时间。
- 动画本身只需定义一个上下位移（如
transform: translateY(-4px)→translateY(4px)） - 三个点共用同一个
@keyframes bounce -
animation-delay分别设为0s、0.2s、0.4s，形成 0.2 秒间隔队列 - 动画时长（
animation-duration）建议设为1s或1.2s，太短会显得急促，太长则节奏拖沓
animation-delay 的实际生效条件和兼容性注意点
animation-delay 只在元素首次进入渲染流（或 display 从 none 变为可见）时触发一次，之后循环播放不再重新计算延迟。如果元素被 JS 动态插入或 visibility: hidden 切换，延迟不会重置。
- 必须配合
animation-iteration-count: infinite才能持续循环，否则只播一次就停 - IE10+ 支持，但 IE10 不支持
animation-fill-mode: backwards，所以延迟期间元素会保持初始状态（不推荐在 IE 场景用此效果） - 若用
opacity配合跳动，记得把animation-fill-mode设为both，否则延迟期透明度可能异常 - 移动端 Safari 对小数值（如
0.15s）延迟解析较粗，建议用0.2s这类整数倍步进
HTML 结构与 CSS 类名如何避免命名冲突和样式污染
三个点通常用 <span></span> 或伪元素生成，不建议用三个独立 <div> 增加 DOM 深度。更稳妥的方式是用一个容器 + <code>::after 和 ::before 补齐三点，或用 display: inline-flex + :nth-child() 精确控制。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：
<span class="loading-dots"></span>，再用.loading-dots::before、.loading-dots、.loading-dots::after表示三点 - 每个点需设
display: inline-block或flex子项，否则transform可能失效 - 避免用
margin-left间距，改用gap（Flex）或inline-gap（未来），更稳定 - 如果项目已用 Tailwind，可用
animate-bounce+ 自定义delay-[200]、delay-[400]，但需确认其@layer utilities已启用
调试时 animation-play-state 和 DevTools 的实用技巧
Chrome/Firefox DevTools 的 Animations 面板能直接暂停、慢放、修改 animation-delay 实时预览，比反复改代码高效得多。但要注意：面板里拖动时间轴只能影响当前循环，不能改变 delay 值本身。
- 临时冻结动画：在 Elements 面板勾选
animation-play-state: paused，观察各点静止位置是否符合预期 - 验证延迟是否生效：把
animation-duration拉长到5s，肉眼就能看清三点是否严格按 0 / 0.2 / 0.4 秒启动 - 容易忽略的坑：父容器有
overflow: hidden时，跳动超出范围会被裁剪，加margin-top: -4px微调基线 - 如果三点跳动不同步，优先检查是否意外触发了多次
animation（比如 JS 重复添加 class，或 Vue 中 key 变化导致重渲染）
--dot-delay: 0.2s），后续维护和主题适配都方便。
