按钮图标旋转动画卡顿、跳变或禁用后停转，根本原因是未控制好渲染层、字体加载时机和disabled行为边界：需显式定义keyframes起止值、避免disabled冻结动画、修正图标对齐与transform-origin、启用硬件加速并适配无障碍。
按钮图标旋转动画卡顿、跳变或禁用后停转，根本原因不是写法错，而是没控制好渲染层、字体加载时机和 disabled 行为边界。
旋转动画在 Safari 或低端设备上跳回 0 度
旧版 Safari（≤15.6）对 @keyframes 解析不完整，只写 to { transform: rotate(360deg); } 会导致循环起点重置，视觉上“啪”一下跳回原位。
- 必须显式写出
from { transform: rotate(0deg); }和to { transform: rotate(360deg); } - 更稳妥用百分比写法：
0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } - 别省略单位——
rotate(0)在某些 Safari 版本里被当成rotate(0rad)，角度计算失效
按钮设 disabled 后图标停止旋转
这是浏览器规范行为，不是 bug。button[disabled] 会冻结所有子元素的 CSS 动画（包括 animation: spin 1s infinite;），Safari 和 Chrome 旧版尤其明显。
- 不要依赖
disabled控制状态，改用data-state="loading"+ class 切换 - 禁用交互用
pointer-events: none;，而非disabled属性 - 若必须用
disabled，需额外加 JS 监听并手动恢复动画：给图标元素设style.animationPlayState = "running"
Font Awesome 图标旋转时上下跳动
图标字体默认按 baseline 对齐，transform: rotate() 会绕文本基线旋转，视觉上“抖”。
- 给图标元素设
display: inline-block;或display: block; - 强制设置
transform-origin: center;（别信默认值） - 避免用
font-display: swap；改用font-display: block或直接切到内联 SVG - 内联 SVG 更可控：
<svg viewbox="0 0 24 24" class="icon-spin">...</svg>，再配.icon-spin { animation: spin 1s linear infinite; }
旋转卡顿或掉帧
CPU 渲染 transform 在复杂页面中容易跌破 60fps，尤其安卓低端机或 iOS WebView。
- 加硬件加速提示：
transform: rotate(0deg) translateZ(0);或will-change: transform;（仅动画元素，别滥用） - 禁用触发布局的属性：旋转时别同时改
width、margin、top等 - 动画时长别太短（如
0.2s），建议 ≥0.4s；用linear而非ease，避免速度不均 - 注意
prefers-reduced-motion：加媒体查询@media (prefers-reduced-motion: reduce) { .icon-spin { animation: none; } }
真正难调的不是旋转本身，是它夹在字体加载、禁用逻辑、GPU 层切换和可访问性之间——每处都得单独验证，不能靠“看起来动了”就认为 OK。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
