加载动画必须用@keyframes显式定义循环，配合infinite、linear及transform-origin；仅用transition无法自启动；须仅使用transform和opacity等合成层友好属性以避免重排卡顿。
用 @keyframes 定义循环动画帧
加载动画本质是无限循环的视觉反馈，必须用 @keyframes 显式定义状态变化。不能只靠 transition，因为它只响应属性变化，不支持自启动、无触发源的持续动效。
常见错误是把旋转动画写成单次执行，忘了加 infinite 和合理的时间函数：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loader {
animation: spin 1s linear infinite;
}
-
infinite缺失 → 动画播完就停，不是“加载中”状态 - 用
ease而非linear→ 旋转会“卡顿”，破坏节奏感 - 没设
transform-origin→ 元素可能绕默认左上角转，视觉偏移
避免布局抖动：用 transform 和 opacity 做动画属性
CSS 动画触发重排（reflow）会导致性能骤降，尤其在低端设备上明显卡顿。加载动画高频运行，必须只操作“合成层友好”的属性。
- ✅ 安全属性：
transform（translate、rotate、scale）、opacity - ❌ 危险属性：
width、height、top、left、margin、padding—— 触发 layout + paint - 若需缩放效果，写
transform: scale(0.8)，别写width: 80%
适配不同场景：环形、点阵、骨架屏的实现差异
没有万能加载动画，选型取决于容器尺寸、品牌调性、是否需语义化提示：
立即学习“前端免费学习笔记（深入）”；
- 小按钮内嵌：用单元素
border+transparent模拟环形，轻量且兼容 IE10+ - 卡片占位：用骨架屏（skeleton screen），靠多个
div+background-gradient模拟内容区块，比 GIF 更可控 - 全页加载：推荐 SVG
<circle>配合stroke-dasharray+stroke-dashoffset实现描边动画，精度高、缩放无损
例如 SVG 环形加载器关键代码：
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="none" stroke="#ccc" stroke-width="8"/>
<circle cx="50" cy="50" r="45" fill="none" stroke="#007bff" stroke-width="8"
stroke-dasharray="283" stroke-dashoffset="0"
style="animation: dash 1.5s ease-in-out infinite;" />
</svg>
@keyframes dash {
0% { stroke-dashoffset: 283; }
50% { stroke-dashoffset: 75; }
100% { stroke-dashoffset: 283; }
}
真机测试时容易忽略的兼容性陷阱
开发阶段在桌面 Chrome 看着流畅，一上 iOS Safari 或安卓旧 WebView 就卡顿或不动，问题常出在：
- iOS 15.4+ 修复了
will-change: transform的内存泄漏，但低于此版本建议慎用 - 某些安卓 Webview 对
animation-timing-function: steps()支持异常，导致逐帧动画跳帧 - 用
rem或%控制动画尺寸时，父容器未设font-size或width→ 动画区域塌陷 - 没加
-webkit-前缀的@keyframes在 Safari 12–14 下直接失效（必须写@-webkit-keyframes）
最稳妥做法：动画容器加 transform: translateZ(0) 强制 GPU 加速，同时保留 -webkit-animation 双声明。
