直接用 transform: rotate() 卡顿是因为触发 layout→paint→composite 全流程，需加 translateZ(0) 和 will-change: transform 提升合成层，仅操作 transform/opacity，避免布局属性及多 transform 分写。
为什么直接用 transform: rotate() 会卡顿
很多初学者写旋转加载动画时，只改 transform: rotate(360deg)，却发现动画不流畅，尤其在低端设备或 Chrome 旧版本里掉帧明显。根本原因是：仅靠 rotate() 触发的是 layout → paint → composite 全流程，浏览器没法把它交给合成线程单独处理。
真正要做的，是让动画只触发 composite 阶段——这要求只使用可被硬件加速的属性，且元素必须有独立的合成层。
- 必须给加载器加
will-change: transform（或transform: translateZ(0)）来提前提示浏览器提升图层 - 动画必须只操作
transform和opacity，绝不能动width、height、left、top等会触发布局的属性 -
@keyframes中避免写多个transform值（比如同时写rotate和scale），应合并为单条声明，如transform: rotate(360deg) scale(1.1)
最简可用的 @keyframes 旋转动画写法
下面这段是经过实测在 Safari 14+、Chrome 90+、Firefox 88+ 都能稳定 60fps 的基础定义：
@keyframes spin {
from { transform: rotate(0deg) translateZ(0); }
to { transform: rotate(360deg) translateZ(0); }
}
注意两点：一是末尾的 translateZ(0) 不可省，它强制开启 GPU 加速；二是不要写成 0%/100%，虽然等价，但部分老版 Safari 对百分比解析更敏感，from/to 更稳妥。
立即学习“前端免费学习笔记（深入）”；
配套的元素样式建议这样写：
