只写transform: rotate(360deg)图标不会动，因其仅为静态变换；必须配合@keyframes定义from/to关键帧、animation绑定spin 1s linear infinite，且需设置transform-origin:center、display:inline-block等渲染细节才能实现稳匀无限旋转。
只写 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); }
}
- 用
0%/100%写法也行，但别混用from/100%这类不匹配组合 - 统一用
deg单位，避免rotate(1turn)这类写法在低版本安卓 WebView 中解析异常 - 别用
rotateZ()或rotate3d()，除非真需要三维上下文；rotate()更轻、兼容性更好
animation: spin 1s linear infinite 缺一不可
绑定动画时，这三个值必须同时存在，漏掉任一个都会出问题：
立即学习“前端免费学习笔记（深入）”；
-
spin：动画名，必须和@keyframes spin严格一致，别加项目前缀 -
1s：建议 0.8–1.2s；太短（如 0.3s）易在低端机掉帧，太长（如 2s）显卡顿；避免用 0.333s 这类非整数毫秒值 -
linear：必须显式写，否则默认ease，开头慢、结尾慢，看着像抖动或卡顿 -
infinite：漏写就只转一圈，加载态直接中断
另外注意：<i>、<svg> 默认是内联元素，transform 对纯内联元素无效 → 必须先加 display: inline-block 或 block。
旋转中心偏移、边缘发虚、Safari 抖动怎么修
这些不是动画逻辑错了，而是渲染层没对齐：
- 旋转中心默认是左上角 → 显式加
transform-origin: center，别依赖浏览器默认值 - 内联元素（如
<i>）没设display→ 加display: inline-block - 用
border画圆环时边框为奇数像素（如 3px）→ 改成偶数（2px 或 4px），规避亚像素模糊 - Safari / 旧 Chrome 渲染抖动 → 加
transform: translateZ(0)强制 GPU 合成（但低端安卓机可能适得其反） - 父容器设了
overflow: hidden，而旋转元素带阴影或伪元素超出边界 → 动画被裁剪，看起来像“没动”
真正难的不是让图标转起来，而是转得稳、不抢焦点、不干扰语义、且在低端机上也不掉帧。
