最可靠的做法是直接用 animation 配合 transform: rotate()，需带单位（deg/rad/turn）、顺时针为正、元素设 display: inline-block 或 block，且显式声明 animation-duration、iteration-count 和 linear 时序。
animation + transform: rotate() 是最可靠的做法
直接用 animation 配合 transform: rotate()，别碰 animation-timing-function 模拟旋转，也别用 JS 定时改 style.transform——前者卡顿，后者难控制节奏。浏览器对 transform 的硬件加速支持成熟，旋转图标这种简单动画，CSS 原生方案又轻又稳。
rotate() 的单位和方向容易写反
常见错误是写成 rotate(90)（缺单位），或以为正数是逆时针（其实是顺时针）。rotate() 必须带单位：deg、rad 或 turn；rotate(1turn) 等价于 rotate(360deg)，更直观。顺时针为正，逆时针加负号：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
图标元素必须是块级或行内块，否则 transform 不生效
<i>、<svg> 默认是行内元素，transform 对纯行内元素无效（除非设 display: inline-block 或 display: block）。尤其用 Font Awesome 的 <i class="fa-solid fa-sync"> 时，不加 display 声明，动画会静止不动。
- 推荐统一加
display: inline-block，不影响布局流 - 如果图标是
<svg>，注意它默认display: inline，同样要改 - 避免用
float或position: absolute强行“修复”，那会引入新布局问题
animation-duration 和 animation-iteration-count 要按需设
旋转图标常用于加载态或交互反馈，但默认 animation-duration: 0s 和 animation-iteration-count: 1 会让动画一闪而过或根本不转。关键参数必须显式声明：
立即学习“前端免费学习笔记（深入）”；
-
animation-duration: 1s—— 太快看不清，太慢（如 3s）显得卡滞，0.8–1.2s 最自然 -
animation-iteration-count: infinite—— 加载图标必须无限循环，漏写就只转一圈 -
animation-timing-function: linear—— 避免ease导致启停抖动，匀速转才像机械运转
完整声明示例：animation: spin 1s linear infinite;
真正要注意的是：rotate 动画在 Safari 旧版本里可能跳帧，如果必须兼容 iOS 12 以下，得加 transform: translateZ(0) 强制 GPU 加速；不过现在绝大多数场景，只写标准 transform: rotate() 就够了。
