无限旋转动画需用@keyframes定义0deg→360deg过渡并设animation-iteration-count: infinite；避免与静态rotate冲突，优先硬件加速，IE11需JS降级或放弃支持。
用 @keyframes 定义无限旋转动画
连续旋转的核心是让 transform: rotate() 从 0deg 平滑过渡到 360deg，并设置循环播放。关键不是“转一圈就停”，而是让浏览器把 360deg 视为等价于 0deg，从而实现视觉无缝衔接。
常见错误是写成 from { transform: rotate(0); } to { transform: rotate(360); } 却没加 animation-iteration-count: infinite，结果只转一次就停了。
- 必须显式声明
animation-iteration-count: infinite（或简写为infinite） - 推荐使用
rotate(360deg)而非rotate(1turn)，后者在部分旧版 Safari 中兼容性较差 - 动画时长建议设为
animation-duration: 2s或更长，过短（如0.1s）易触发渲染抖动
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.icon-spin {
animation: spin 2s linear infinite;
}
避免 transform 与其他 rotate 动画冲突
如果图标本身已有 transform: rotate(45deg) 这类静态旋转，再叠加 @keyframes spin 会导致坐标系混乱——浏览器会把两个 rotate() 值相加，但动画起始点可能偏移，出现“晃动”或“跳帧”。
根本原因是 CSS transform 是累加的，而 @keyframes 中的 rotate() 是绝对值，不是相对增量。
立即学习“前端免费学习笔记（深入）”；
- 静态旋转应移入伪元素或父容器，主元素只负责动画
- 或改用
rotateZ()显式指定轴向，减少歧义 - 若必须共存，用
transform: rotate(45deg) rotateZ(var(--spin, 0deg))+ 自定义属性控制，但需 JS 配合
性能敏感场景下优先用 will-change 和硬件加速
纯 transform: rotate() 本就触发 GPU 加速，但某些低端安卓 WebView 或 iOS 14 以下 Safari 仍可能掉帧。此时需主动提示浏览器“这个元素要动”。
- 加上
will-change: transform可提前分配图层，但别滥用——仅对持续动画的元素设置 - 确保没有同时设置
opacity或filter等会禁用硬件加速的属性 - 避免在
rotate()同时做scale()或translate()复合变换，除非真需要；单一 rotate 最稳
IE11 及更老浏览器 fallback 方案
IE11 支持 @keyframes 和 transform，但不支持 animation-timing-function: linear 在 rotate 动画中的平滑插值，会出现卡顿感。Edge 12–18 也有类似问题。
- 可降级为 JavaScript 控制：用
requestAnimationFrame每帧更新style.transform = 'rotate(' + deg + 'deg)' - 或直接放弃 IE 支持，在 CSS 中加
@supports (animation: spin 1s) { ... }隔离现代写法 - 注意：IE 不支持
transform: rotateZ()，只认rotate()
真正难的不是写出让图标转起来的代码，而是当它和 flex 布局、position: absolute、或者某个第三方 UI 库的 class 共存时，依然不偏移、不闪烁、不掉帧。这时候得一层层检查 computed style 里的 transform 值是否被意外覆盖。
