CSS如何制作一个跳动的加载圆点_利用keyframes位移与延迟配合css

用同一组@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 却得不到连贯波浪感。