用@keyframes实现圆点逐个点亮循环动画的核心是为每个设独立animation-delay，配合opacity或transform动画，并必须设animation-fill-mode: both以保持结束帧；总周期=单点动画时长+最后一点延迟；推荐内联style设delay或:nth-of-type避免索引错位；禁用box-shadow和background-color渐变以保性能。
怎么用 @keyframes 实现圆点逐个点亮的循环动画
核心是把「圆点」抽象成一组相同结构的 <span></span>，用 animation-delay 错开每颗的启动时机，配合 opacity 或 transform 控制显隐或缩放。别用 animation: name 1s infinite 统一写——那样所有点会同步动，不是“逐个亮”。
- 每个圆点需有独立的
animation-delay，比如第1个0s、第2个0.2s、第3个0.4s -
@keyframes只定义单点行为：从透明到不透明（或小变大），持续时间建议 ≤ 0.6s，否则节奏拖沓 - 总循环周期 = 单点动画时长 + 最后一点的
animation-delay，例如 0.5s 动画 + 0.8s 延迟 → 总周期 1.3s
CSS 圆点动画里 animation-fill-mode 必须设为 both
否则动画一结束，圆点就立刻回到初始状态（比如全透明），导致“点亮→熄灭→再点亮”的闪烁断层。设成 both 才能让动画结束帧保持住，视觉上形成平滑衔接。
- 漏设
animation-fill-mode: both是最常见卡点，尤其在 Safari 上表现更明显 - 不能只靠
animation-direction: alternate想实现回环——那是来回播，不是循环点亮 - 如果用了
transform: scale()，记得加transform-origin: center，否则缩放可能偏移
用 nth-child 批量设置延迟时，注意选择器权重和索引偏差
写 .dot:nth-child(1) { animation-delay: 0s; } 看似直觉，但一旦父容器里有其他元素（比如注释、文本节点、或非 .dot 的标签），:nth-child 就会算错位置。稳妥做法是用 :nth-of-type 或直接给每个点加 style 属性。
- 推荐写法：
<span class="dot" style="animation-delay: 0s"></span>，可控且无歧义 - 若坚持 CSS 批量控制，用
.dots > .dot:nth-of-type(1)更稳，前提是所有点都是同级同标签 - 别用
for循环生成内联样式——纯 CSS 场景下没这东西；JS 注入时也别拼字符串，改用element.style.animationDelay = `${i * 0.2}s`
移动端圆点动画卡顿？优先砍掉 box-shadow 和过度重绘
每个圆点如果带 box-shadow 或 border-radius 配合 opacity 动画，在低端 Android 或旧 iOS 上极易掉帧。真正轻量的做法是只动 opacity 或 transform，这两者能走 GPU 加速。
- 禁用
background-color渐变动画——浏览器无法硬件加速颜色变化 - 圆点尺寸建议 ≤ 12px，太大在 1x 屏上会糊，且重绘区域大
- 测试时关掉 Chrome DevTools 的 “Emulate touch” 选项，它会让合成层判断失灵，误报卡顿
动画循环的实质不是“重复播放一段”，而是让 N 个点在时间轴上铺开、首尾咬合。最容易被忽略的是：延迟值必须严格对齐动画时长，差 0.05s 都可能导致某一颗“跳帧”或“卡住”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
