要让图标真正旋转，必须用@keyframes定义起止帧、animation绑定执行且设infinite循环；仅transform:rotate(360deg)无效，因无时间插值。
只写 transform: rotate(360deg) 图标不会动——它不是动画，只是静态快照。 要让图标真正转起来，必须用 @keyframes 定义旋转路径，再用 animation 驱动执行，三者缺一不可：起止帧、动画绑定、无限循环。
为什么 transform: rotate(360deg) 单独写没反应
浏览器把 transform 当作布局后的一次性计算，加了就立刻跳到 360°，没有中间插值过程。加载图标需要的是随时间连续变化的视觉反馈，这只能靠 @keyframes 描述帧序列 + animation 按时执行来完成。
- 常见现象：图标加了
transform: rotate(360deg)却纹丝不动 - 手动切 class 后“闪一下”才开始转 → 漏写了
from帧或初始态未定义 - 转一圈就停 →
animation-iteration-count没设infinite
@keyframes spin 必须显式写 from 和 to
只写 to { transform: rotate(360deg); } 在旧版 Safari 或 IE11 中可能被忽略或跳帧。可靠写法是起止状态都明确：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
- 统一用
deg单位，避免rotate(1turn)在低版本安卓 WebView 中解析异常 - 别用
rotateZ()或rotate3d()，除非真需要三维上下文；rotate()更轻、兼容性更好 - 用
0%/100%写法也行，但别混用from/100%这类不匹配组合
animation: spin 1s linear infinite 缺一不可
绑定动画时，这三个值必须同时存在，漏掉任一个都会出问题：
-
spin：动画名，必须和@keyframes名称一致 -
1s：时长，小图标（16–24px）建议 0.8–1.2s；太短易丢帧，太长显卡顿 -
linear：匀速，避免默认ease带来的快慢变化，影响加载节奏感 -
infinite：无限循环，否则只执行一次就停
还要注意：transform-origin: center 确保绕中心转；display: inline-block 或 block 保证元素有渲染盒；SVG 图标需额外设 transform-origin，否则默认以左上角为原点导致位移。
真正难的不是让图标转起来，而是转得稳、不抢焦点、不干扰语义、且在低端机上也不掉帧——这些细节藏在 transform-origin、像素对齐、硬件加速（如 translateZ(0)）和可访问性（如 aria-busy="true"）里，容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
