直接用 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 更稳妥。
立即学习“前端免费学习笔记（深入）”；
配套的元素样式建议这样写：
- 容器设
display: inline-block或flex，避免文档流干扰 - 加载器本身加
animation: spin 0.8s linear infinite，时长别低于 0.6s，否则人眼易察觉跳帧 - 务必加
backface-visibility: hidden，防止某些安卓 WebView 渲染翻转面导致闪烁
如何让旋转动画适配深色模式和高对比度环境
纯 CSS 加载器常被忽略可访问性问题：深色背景上用浅灰旋转圈看不清；Windows 高对比度模式下可能直接消失。这不是加个 prefers-color-scheme 就能解决的。
实际做法是把颜色控制权交给父容器，而不是写死在动画里：
- 加载器用
border: 2px solid currentColor，而非border-color: #666 - 通过外层 wrapper 设置
color，例如.loader-wrapper { color: var(--loading-color, #007bff); } - 配合媒体查询主动降级：
@media (forced-colors: active) { .spinner { border-color: Highlight; } }
这样既保持语义清晰，又不用为每种主题重复写 keyframes。
移动端真机调试时发现动画突然暂停的常见原因
在 iOS Safari 或微信内置浏览器中，动画跑着跑着就停了，刷新才恢复——大概率不是代码问题，而是浏览器的节流策略在作祟。
- 页面切到后台（比如按 Home 键）、或标签页非激活状态时，iOS 会暂停所有
animation和requestAnimationFrame，这是 WebKit 强制行为，无法绕过 - 更隐蔽的是：某些安卓厂商定制系统（如华为 EMUI）会在低电量模式下主动冻结 CSS 动画，此时
animation-play-state读出来仍是running，但视觉已停滞 - 临时缓解办法：监听
visibilitychange，在页面重获可见时手动重置动画：el.style.animation = 'none'; setTimeout(() => el.style.animation = '', 10);
真正健壮的加载器，得接受“动画可能被中断”这个事实，重点保证 loading 状态的业务逻辑不依赖动画是否在转。
