用CSS实现三点加载动画需三要素：HTML用块级容器包裹三个同级span；CSS用@keyframes定义动画，配合:nth-child()设置0s/0.4s/0.8s正值延迟；加animation-fill-mode: both防首帧闪烁，推荐缩放+透明度方案并强制合成层提升性能。
直接用 CSS 实现三点加载动画，不需要 JS，关键在 @keyframes + :nth-child() + 差异化 animation-delay。只要结构清晰、延迟配对正确，3 行 CSS 就能跑起来。
HTML 结构怎么写才不踩坑
必须用块级容器包裹三个同级元素，推荐 span 或 div，避免嵌套层级过深导致 :nth-child() 失效：
- ✅ 正确：
- ❌ 错误：
:nth-child(1)会匹配不到span） - 父容器建议设
display: flex+justify-content: center居中，避免依赖text-align和内联元素的换行行为
animation-delay 的负值和正值怎么选
用负延迟（如 -0.4s）能让动画“从中间帧开始”，视觉上更自然；但初学者容易搞混顺序。更稳妥的做法是统一用正值延迟，从第一个点开始依次触发：
.dot-loading span:nth-child(1) { animation-delay: 0s; }.dot-loading span:nth-child(2) { animation-delay: 0.4s; }.dot-loading span:nth-child(3) { animation-delay: 0.8s; }- 动画总时长设为
1.2s，这样三个点刚好形成连续波浪节奏；若改用1s，延迟就得调成0s / 0.33s / 0.66s才匀称 - 别漏加
animation-fill-mode: both，否则动画第一帧可能闪一下再启动
缩放动画 vs 颜色切换动画的区别
两种主流实现方式，适用场景不同：
-
缩放+透明度（
transform: scale()+opacity）：适合现代 UI，动效柔和，GPU 加速友好，推荐作为默认方案 -
纯颜色切换（如
background-color在黑白间跳变）：兼容性更好（IE10+），但颜色突变易显生硬，且无法硬件加速，频繁重绘可能卡顿 - 注意：不要在同一个
@keyframes里混用transform和background-color做主控属性，浏览器可能降级到 CPU 渲染 - 如果要用颜色呼吸效果，建议用
opacity配合固定背景色，而不是反复改background-color
移动端适配和性能要注意什么
三点动画看着小，但在低端 Android 或 iOS Safari 上容易掉帧：
- 点尺寸建议控制在
8px–12px，width/height超过16px时，iOS WebKit 可能拒绝启用图层合成 - 加
transform: translateZ(0)或will-change: transform到每个点上，强制创建独立合成层（但别滥用，3 个点够了） - 媒体查询里可降级：比如
@media (max-width: 480px)中把animation-duration从1.2s改成1s，减少视觉滞重感 - 别用
%单位定义margin或width，移动端视口缩放会导致点间距错乱；一律用px或rem
真正难的不是写出来，而是让三个点在各种机型上都“呼吸同步”——延迟值、动画时长、合成层触发，三者得咬合严丝合缝，差 0.05s 都可能看出卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
