用 animation-delay 可让多个点依次闪烁：复用同一 pulse 动画，仅通过 .dot:nth-child(n) 设置递增延迟值（如 0s、0.2s、0.4s），实现错开闪烁而非同步或逐个轮替。
animation-delay 怎么让多个点依次闪烁
用 animation-delay 控制多个点的启动时机，是实现“逐个点亮”加载动画最轻量、兼容性最好的方式。它不依赖 JS，纯 CSS 就能跑，而且动画节奏完全可控。
关键不是给每个点写不同动画名，而是复用同一套 @keyframes，只改 animation-delay 值：
div.dot {
animation: pulse 1.4s infinite;
}
.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
- 所有点共用
pulse动画，避免重复定义 -
animation-delay是「延迟开始」，不是「暂停播放」，动画循环仍按原周期执行 - 若总周期是
1.4s，三个点分别延时0s、0.2s、0.4s，视觉上就是错开闪烁，不是“一个灭完才亮下一个”
为什么不能只靠 animation-duration 调节奏
animation-duration 改的是单次循环耗时，不是点与点之间的间隔。如果三个点都设成 duration: 0.6s 但没设 delay，它们会同步闪，毫无顺序感。
常见误操作：
.dot { animation: pulse 0.6s infinite; }
/* 错！没 delay，三者完全同步 */
- 想让节奏“慢一点”，调的是
animation-duration；想让“错开一点”，必须靠animation-delay - 如果用 JS 动态增删 class 控制显示，反而破坏 CSS 动画的自然循环，容易卡顿或跳帧
- 移动端 Safari 对极小
delay（如0.05s）渲染不稳定，建议最小步进设为0.1s以上
如何用 calc() 自动生成 delay 值
点数一多（比如 6 个），手写 nth-child(n) 太累，可以用 calc() 算出延时值，配合 CSS 自定义属性更灵活：
:root { --dot-count: 6; }
.dot {
--i: attr(data-index);
animation-delay: calc((var(--i) - 1) * 0.15s);
}
前提是 HTML 中每个点带 data-index="1"、data-index="2" 等属性。现代浏览器支持良好，但注意：
-
attr()在animation-delay中使用，仅在 Chrome 115+、Firefox 119+、Safari 17.4+ 支持；旧版需回退到手动 nth-child - 别用
calc(100% * 0.1s)这类单位混用写法，会直接失效 - 如果点是动态插入的（如 React 渲染），JS 注入
data-index比依赖 CSS 计算更可靠
animation-delay 配合 steps() 做“硬切换”效果
默认 pulse 是缓动（ease），看起来是渐亮渐暗；如果要“啪一下亮、啪一下灭”的机械感，得配合 steps(1, end) 和精确的 keyframes：
@keyframes blink {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
.dot { animation: blink 1.2s steps(1, end) infinite; }
-
steps(1, end)表示整个周期只分 1 步，且在周期结束时跳变，没有过渡 - 此时
animation-delay依然生效，但“错开”的是跳变时刻，不是渐变过程 - 这种写法在低性能设备上更省资源，因为浏览器不用插值计算中间帧
实际做加载点动画时，最容易被忽略的是：延时值和动画周期之间要有合理比例。比如周期 1.2s，却用 0.01s 的 delay 差，人眼根本看不出错开；而 delay 设到 0.8s 又会让最后一个点等太久才开始动。节奏感藏在数值比里，不是随便凑出来的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
