transform: rotate(360deg)单独使用不会动，因为它只是静态变换；必须配合@keyframes定义关键帧（如from{rotate(0deg)}to{rotate(360deg)}）和animation属性（如spin 1s linear infinite）才能实现持续匀速旋转动画。
只写 transform: rotate(360deg) 不会动——它不是动画，只是个静态状态。要持续旋转，必须用 @keyframes 驱动 + animation 绑定。
为什么 transform: rotate() 单独写没反应
浏览器把 transform 当作布局后的一次性变换，不触发重绘循环。你改了值，它就立刻跳到那个角度，没有“过程”。加载图标需要的是随时间连续变化的视觉反馈，这只能靠 @keyframes 定义帧序列、再由 animation 按时执行来实现。
常见错误现象：
- 图标加了
transform: rotate(360deg)但完全不动 - 手动改 CSS 变量或 class 后，图标“闪一下”才开始转（说明漏了
from帧或初始态未定义） - 转一圈就停，没持续——
animation-iteration-count没设infinite
@keyframes spin 怎么写才可靠
关键不是语法多炫，而是让浏览器能稳定识别起止点并插值。推荐最简写法：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
实操建议：
- 必须同时写
from和to（或0%/100%），只写to可能被忽略 - 别用
rotateZ()或rotate3d()，除非真需要三维上下文；rotate()更轻量、兼容性更好 - 角度单位统一用
deg，避免混用turn或rad导致调试困难 - 动画名就叫
spin，别加版本号或项目前缀，减少命名冲突风险
animation 属性三个参数不能少
绑定动画时，这三个值缺一不可：
.loading-icon {
animation: spin 1s linear infinite;
}
含义依次是：spin（动画名）、1s（单次时长）、linear（匀速）。漏掉任一个都会出问题：
- 没写
infinite→ 只转一圈就停 - 没写
linear→ 默认ease，开头慢、中间快、结尾慢，看着像卡顿 - 时长设太短（如
0.2s）→ 高频刷新可能在低端安卓 WebView 中掉帧
另外注意：如果图标是 <i></i> 或 <span></span> 这类内联元素，得先加 display: inline-block 或 block，否则 transform 可能不生效。
旋转模糊、边缘发虚怎么办
这不是代码写错，是高 DPI 屏幕下 subpixel rendering 和旋转中心偏移共同导致的抗锯齿偏差。解决思路很具体：
- 确保图标容器宽高为偶数像素（比如
24px × 24px），奇数尺寸 + 旋转易产生半像素偏移 - 显式设置
transform-origin: center，避免依赖默认值在不同浏览器中行为不一致 - 加
transform: rotate(0deg) translateZ(0)强制走 GPU 渲染路径（比will-change: transform更稳妥，后者在某些旧版 Safari 中反而引发闪烁） - 别用
border画圆环加载器；改用box-shadow或 SVG，前者抗锯齿控制更可控
真正容易被忽略的是：旋转动画一旦启停频繁（比如点击切换 loading 状态），transform 的图层复用机制可能失效，导致每次 toggle 都重建渲染层。这时候用 CSS 变量 + transition 控制旋转角度，比反复增删 rotating 类更稳。但那是另一个问题了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
