最简单可靠的方式是用transform-origin: center配合@keyframes和animation: spin 1s linear infinite；必须设display: inline-block并避免字体加载跳动或disabled导致动画冻结。
用 transform: rotate() 实现平滑旋转图标
纯 CSS 实现加载图标旋转最简单可靠，不需要 JS 控制生命周期。关键不是加 animation，而是确保图标的 transform-origin 在中心，否则会偏移抖动。
常见错误是直接对 <i class="icon-loading"></i> 加动画，但图标字体（如 Font Awesome）默认 baseline 对齐，视觉上会“跳”。
- 给图标元素设
display: inline-block或display: block - 显式设置
transform-origin: center（不要依赖默认值） - 动画用
infinite linear，避免ease导致速度不均 - 若用 SVG，优先内联
<svg>并设viewBox，避免外部引用尺寸失控
.loading-icon {
display: inline-block;
width: 1em;
height: 1em;
animation: spin 1s linear infinite;
transform-origin: center;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
避免 font-display: swap 导致图标闪动
使用图标字体时，如果 CDN 加载慢，浏览器先渲染空白或方块，等字体就绪后突然“跳”成图标——这在加载状态里特别刺眼，用户会误以为操作卡死。
根本原因不是动画本身，而是字体加载策略。不能靠 JS 监听 fontload 再显示，因为加载状态 UI 必须「立刻可见」。
立即学习“前端免费学习笔记（深入）”；
- 改用本地托管的图标字体，并在
@font-face中设font-display: block（强制等待字体加载完成再渲染） - 更推荐：直接用 SVG Sprite 或 inline SVG，彻底绕过字体加载问题
- 若必须用远程图标字体，至少加
font-display: optional+ fallback 字符（如●），比空白好
按钮禁用态下旋转图标要同步控制 pointer-events
点击按钮触发异步请求后，常把按钮设为 disabled 并插入旋转图标。但原生 button[disabled] 会禁用所有子元素交互，导致图标动画被浏览器暂停（尤其 Safari 和旧版 Chrome）。
这不是 bug，是规范行为：禁用按钮内所有内容进入非活动状态，CSS 动画也会冻结。
- 别用
disabled，改用aria-disabled="true"+ 自定义样式（opacity: 0.6; cursor: not-allowed） - 同时确保图标父容器未被设
pointer-events: none（检查 CSS 是否意外继承） - 测试时在 Safari 开发者工具中勾选「Disable animations」看是否真停了——停了就是被禁用态影响
移动端 Safari 中 will-change: transform 可能引发闪烁
为提升旋转性能，有人会给图标加 will-change: transform。但在 iOS 15–16 的 Safari 中，这反而导致旋转过程中偶发白边或像素撕裂，尤其叠加在深色背景上。
这不是渲染 bug，而是硬件加速层切换时的合成异常。实际项目中，90% 的加载图标完全不需要 will-change。
- 仅当旋转元素尺寸 > 200px 且页面存在大量其他动画时才考虑启用
- 启用前务必在真机（非模拟器）上反复滚动+触发加载，观察是否出现边缘锯齿
- 更稳妥的替代：用
translateZ(0)触发 GPU 加速，兼容性更好，副作用更少
真正难处理的，是图标旋转和文字缩放、系统级动画减速（如 macOS 的「Reduce motion」）、以及暗色模式下 SVG fill 颜色继承冲突——这些不会报错，但会让加载状态看起来“不对劲”，得逐个环境验证。
