旋转loading图标卡顿主因是transform基线不一致触发重排、默认原点偏移导致视觉跳动、亚像素渲染致边缘发虚，须显式写全transform值、设transform-origin:center、加backface-visibility:hidden并用linear时序。
直接用 transform: rotate() 加 @keyframes 很容易卡顿或跳帧，关键不在“会不会转”，而在“怎么转不抖、不虚、不暂停”。
为什么旋转 loading 图标会卡顿或跳帧
浏览器对 rotate(0deg) → rotate(360deg) 的插值不是数学上连续的——尤其当元素已有其他 transform（比如 scale(1.2) 或 translateX(2px)）时，浏览器会尝试叠加而非覆盖，导致中间帧计算异常。更隐蔽的是：如果父容器没设 transform-origin: center，旋转原点默认在左上角，视觉上像“甩出去”，一帧偏移就明显卡顿。
- 别只写
from { transform: rotate(0deg); } to { transform: rotate(360deg); }，必须显式补全所有变换项，例如transform: rotate(0deg) scale(1) translateZ(0); - 确保旋转元素有明确宽高（如
width: 24px; height: 24px;），避免由内容撑开导致 layout 波动 - 若用 SVG，
viewBox和外层容器尺寸要一致，否则缩放错位会放大抖动
怎样防止边缘发虚和 Safari 动画冻结
Retina 屏或非 100% 缩放下，rotate() 容易落在亚像素位置，光栅化后边缘模糊；而 Safari 在 button[disabled] 内会直接冻结所有 CSS 动画，哪怕只是子元素。
- 给旋转元素加
backface-visibility: hidden;，强制启用 GPU 合成层，改善抗锯齿 - 禁用
button[disabled]，改用aria-disabled="true"+ 自定义样式（opacity: 0.6; pointer-events: none;） - 测试时打开 Safari 开发者工具 → “Rendering” → 勾选 “Disable animations”，确认动画是否真被冻结而非视觉错觉
animation-timing-function 必须用 linear
加载图标不是展示物理惯性，是传递“持续工作”的感知。人眼对匀速旋转最敏感，哪怕轻微加速/减速（如 ease 或 cubic-bezier）也会被识别为“卡→突进”，尤其在 30fps 设备上更明显。
立即学习“前端免费学习笔记（深入）”；
- 绝对不要用
animation-timing-function: ease;或自定义贝塞尔曲线——它们在循环动画里造成起点/终点速度不连续 - 若需节奏变化（如品牌规范要求），改用
steps(12, end)做帧动画，而非改缓动函数 - 时间值优先用整数毫秒（如
1s、0.8s），避开0.333s这类易丢帧的值
图标字体加载导致的闪动问题
Font Awesome 等图标字体加载慢时，先显示方块或空白，等字体就绪后“啪”一下跳成图标——在 loading 状态里极其干扰，用户会误判操作失败。
- 彻底绕过字体：用 inline SVG，或本地托管的 SVG sprite
- 若必须用远程图标字体，在
@font-face中设font-display: block;（强制等待字体加载完成再渲染） - 底线方案：加 fallback 字符，如
content: "●";，比空白强得多
真正难的不是让图标转起来，而是让每一帧都落在渲染管线该落的位置——这需要同时控制基线（transform-origin）、合成层（backface-visibility）、插值逻辑（完整 transform 值）和加载时机（字体策略）。漏掉任意一环，都可能在某个设备或某个网络条件下突然“卡住”。
