只写transform: rotate(360deg)图标不转，因其仅为静态变换，必须配合@keyframes定义路径并用animation绑定驱动；需显式设置animation: spin 1s linear infinite、transform-origin: center及gpu加速等关键点才能实现稳、匀、无限旋转。
直接用 @keyframes + animation 就能跑起来，但漏掉任意一个关键点，图标就会不动、跳帧、偏移或发虚。
为什么只写 transform: rotate(360deg) 图标不转
这是最常踩的坑：transform 本身只是静态变换，不是动画。浏览器不会自动插值或循环执行它。
-
transform: rotate(360deg)只会让元素“瞬间跳到”那个角度，没有过程 - 必须配合
@keyframes定义变化路径（比如从0deg到360deg），再用animation绑定并驱动 - 如果用了
transition而非animation，也只会响应属性变化（比如 class 切换），不能自动无限循环
必须写的三个 animation 参数：时长、匀速、无限
animation 简写里缺一不可，漏掉任一个都会导致异常表现：
-
spin：动画名，必须和@keyframes spin严格一致 -
1s：建议 0.8–1.2s，太短易晕，太长显卡顿；避免用0.333s这类非整数毫秒值，60fps 下可能丢帧 -
linear：必须显式写，否则默认ease，开头慢、结尾慢，看着像卡顿或抖动 -
infinite：漏写就只转一圈，加载态就断了
完整写法：animation: spin 1s linear infinite;
旋转中心偏移、图标跳动或边缘发虚怎么办
本质是渲染层没对齐，不是动画逻辑错了：
- 内联元素（如
<i></i>、<svg></svg>）默认display: inline，transform不生效 → 必须加display: inline-block或block - 旋转中心默认是左上角 → 显式加
transform-origin: center，别依赖浏览器默认值 - 用
border画圆环时边框为奇数像素（如3px）→ 改成偶数（2px或4px），规避亚像素模糊 - Safari / 旧 Chrome 渲染抖动 → 加
transform: translateZ(0)强制 GPU 合成（注意低端安卓机可能适得其反）
用 border 还是 SVG？优先选哪个
日常加载图标，border + border-radius 是最稳的选择，除非你有明确 SVG 需求：
-
border方案：轻量、兼容性好、无资源加载延迟，适合按钮、表单等小范围状态反馈 -
SVG方案：需内联（避免外部引用失败），设固定宽高 +viewBox，否则容易位移；更适合带路径动画或品牌定制图标 - 别用
box-shadow模拟圆环，高 DPI 屏上易发虚；也别用background+radial-gradient，渲染开销大且难对齐
真正难的不是让图标转起来，而是转得稳、不抢焦点、不干扰语义、且在低端机上也不掉帧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
