直接用@keyframes+transform:rotate()即可实现纯CSS旋转加载动画，核心三步：画圆环（border-radius:50%+单边着色）、定义@keyframes旋转关键帧、绑定animation:spin 1s linear infinite；须设infinite否则只转一圈，推荐时长0.8s～1.2s。
直接用 @keyframes + transform: rotate() 就能实现，不需要 JS、不依赖图片，现代浏览器全支持。
最简可用的旋转加载动画写法
核心就三步：画个环、定义旋转、绑到元素上。常见错误是忘记设 border-radius: 50% 或漏掉 infinite 导致只转一圈就停。
-
.loader必须有宽高，且border-radius: 50%才能成圆环 - 用
border-top（或border-right）单独设色，比全边框加clip-path更轻量、兼容性更好 -
animation必须包含infinite，否则默认只播一次 - 推荐时长设
0.8s～1.2s：太慢显得卡顿，太快易引发视觉疲劳
.loader {
width: 40px;
height: 40px;
border: 3px solid #eee;
border-top-color: #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
为什么用 transform 而不是 left/top
用 left 或 top 触发的是 layout → paint 流程，每帧都重排重绘，移动端尤其卡；transform 属于合成层属性，走 GPU 加速路径，60fps 更稳。
- 即使只是旋转，也别写
left: 10px; animation: move 1s infinite—— 这类写法在中低端 Android 上容易掉帧 - 加
will-change: transform有帮助，但只对长期动画元素加，别滥用（会提前占用图层内存） - 如果动画嵌套多层（比如环内再套一个反向转的小点），每层都用
transform，别混用定位属性
多层/反向/变速旋转的实用控制
纯 CSS 实现差异化动效，关键在 animation-duration、animation-direction 和伪元素隔离。
立即学习“前端免费学习笔记（深入）”；
- 外环顺时针转，内点逆时针转：用
::before伪元素，设animation-direction: reverse - 两层不同速度：外环
1s，内点0.6s，自然形成错动感 - 避免用
animation-delay做“错峰启动”，它只影响首帧，循环后节奏仍同步；真要错位，改animation-duration或用不同@keyframes - 需要暂停/播放控制？JS 只需切
animation-play-state: paused/running，无需重写 keyframes
真正难的不是让东西转起来，而是转得自然、省资源、不抢主线程。很多项目上线后才发现 loading 动画拖慢首屏渲染，问题常出在父容器用了 filter: drop-shadow() 或动画元素没脱离文档流——这些细节比写对 @keyframes 更值得花时间检查。
