只写transform: rotate(360deg)图标不会动，因其仅为静态变换；必须配合@keyframes定义from{rotate(0deg)}to{rotate(360deg)}及animation: spin 1s linear infinite才能实现持续匀速无限旋转。
只写 transform: rotate(360deg) 图标不会动——它不是动画，只是瞬间跳转到那个角度。 要实现持续、平滑、无限旋转的加载效果，必须用 @keyframes 定义变化过程，并通过 animation 属性驱动执行。
为什么 transform: rotate() 单独写没反应
浏览器把 transform 当作布局后的一次性视觉变换，不触发重绘循环。你加了这行，元素立刻“卡”在 360°，没有过渡、没有帧、没有时间维度。加载动画需要的是随时间连续插值的变化，这只能靠 @keyframes + animation 组合来提供。
常见错误现象包括：
-
transform: rotate(360deg)写在元素上，图标完全静止 - 手动切换 class 后图标“闪一下”才开始转（说明初始态未定义或漏了
from） - 转一圈就停（
animation-iteration-count没设infinite）
@keyframes spin 必须显式写 from 和 to
只写 to { transform: rotate(360deg); } 在旧版 Safari、IE11 或某些安卓 WebView 中可能被忽略或跳帧。可靠写法是起止点都明确：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
实操建议：
- 别用
rotateZ()或rotate3d()，除非真要三维上下文；rotate()更轻量、兼容性更好 - 角度单位统一用
deg，避免混用turn或rad导致调试困难 - 动画名就叫
spin，别加版本号或项目前缀，减少命名冲突风险
animation 简写缺一不可：时长、匀速、无限
绑定动画时，这三个参数必须同时存在：
.loading-icon {
animation: spin 1s linear infinite;
}
含义依次是：spin（动画名）、1s（单次时长）、linear（匀速）。漏掉任一个都会出问题：
- 没写
infinite→ 只转一圈就停 - 没写
linear→ 默认ease，开头慢、结尾慢，看着像卡顿 - 时长设成
0.333s这类非整数毫秒值 → 在 60fps 下容易丢帧
旋转中心偏移、跳动或边缘发虚怎么办
这不是动画逻辑错了，而是渲染层没对齐。关键修复点：
- 内联元素（如
<i></i>、<svg></svg>）默认display: inline，transform不生效 → 必须加display: inline-block或block - 旋转中心默认是左上角 → 显式加
transform-origin: center，别依赖浏览器默认值 - 用 border 画圆环时边框为奇数像素（如
3px）→ 改成偶数（2px或4px），规避亚像素模糊 - Safari / 旧 Chrome 渲染抖动 → 加
transform: translateZ(0)强制 GPU 合成（注意低端安卓机可能适得其反）
真正让旋转加载“稳、匀、无限”的，不是写对了 rotate()，而是补全了那几个容易被跳过的渲染控制点：起止帧、transform-origin、linear、infinite，还有 GPU 加速触发条件。漏掉任意一个，图标就可能不动、跳帧、偏移或发虚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
