本文介绍如何使用 CSS animation-delay 属性，为三个点元素创建流畅、依次弹跳（boing-boing-boing）的省略号加载动画，避免同步脉冲问题。
本文介绍如何使用 css `animation-delay` 属性，为三个点元素创建流畅、依次弹跳（boing-boing-boing）的省略号加载动画，避免同步脉冲问题。
要实现经典的“逐个弹跳”省略号动画（即第一个点先上弹、第二个稍后、第三个再稍后，循环往复），关键在于错开每个点的动画起始时间，而非让所有点同时执行相同动画。原代码中三个 <div> 共享完全一致的 animation 声明，导致它们同步缩放与透明度变化，呈现“心跳式”集体脉冲——这正是问题根源。
解决方案是：统一动画时长与行为，但为每个点设置不同的 animation-delay。以下是优化后的完整实现：
.ellipsis {
display: flex;
justify-content: center; /* 可选：居中对齐 */
}
.ellipsis div {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
margin: 0 5px;
/* 初始状态需显式声明，确保延迟前可见且稳定 */
opacity: 0.2;
transform: scale(0.8);
/* 动画：1秒完成，0.5秒延迟启动，线性过渡，正反交替，无限循环 */
animation: ellipsisAnimation 1s 0.5s linear alternate infinite;
}
/* 第一个点：延迟 0.25s 启动 */
.ellipsis div:first-child {
animation-delay: 0.25s;
}
/* 第二个点：使用默认 delay（0.5s），无需额外声明 */
/* 第三个点：延迟 0.75s 启动 */
.ellipsis div:last-child {
animation-delay: 0.75s;
}
@keyframes ellipsisAnimation {
/* 仅定义终点状态（100%），起点由初始样式决定 */
100% {
opacity: 1;
transform: scale(1);
}
}<div class="ellipsis"> <div></div> <div></div> <div></div> </div>
✅ 为什么这样更优？
- 使用 alternate 模式自动实现“上弹→回落”循环，无需手动写 0%/50%/100% 多段关键帧；
- linear 缓动保证匀速升降，强化“boing”的轻快感；
- 显式设置初始 opacity 和 transform，避免动画开始前的闪烁或布局抖动；
- animation-delay 精确控制节奏：三个点分别在 0.25s、0.5s、0.75s 启动，形成自然的波浪式序列。
⚠️ 注意事项：
- 若需适配深色背景，请调整 background-color 和 opacity 值以保障可读性；
- 在低性能设备上，建议添加 will-change: transform, opacity 提升渲染效率（谨慎使用）；
- 如需响应式缩放，可将尺寸单位改为 rem 或 em，并配合 font-size 调整整体大小。
通过合理运用 animation-delay 与 alternate，你就能轻松打造专业、轻量、语义清晰的逐点省略号动画——简洁、可控，且完全无需 JavaScript。
