基础转圈动画需两步：先用@keyframes定义从rotate(0deg)到rotate(360deg)的关键帧，再用animation: spin 0.8s linear infinite绑定；避免触发布局属性、确保gpu加速、注意优先级与渲染条件。
怎么用 @keyframes 写一个基础转圈动画
核心就两步：定义旋转关键帧，再用 animation 绑定到元素上。别写成 0% → 100% 都设 transform: rotate(360deg)，那样浏览器不会动——得从 rotate(0deg) 到 rotate(360deg) 才有变化。
-
@keyframes spin必须带名字，且名字要和animation-name完全一致（区分大小写） - 推荐写
from/to，语义清晰，也避免漏写百分比符号 - 别在
@keyframes里写display或width这类触发布局的属性，容易卡顿
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
animation 的四个常用参数怎么配才不翻车
光写 animation: spin 1s 很容易转一半停住、方向反了、或者点一下才动一次。真正控制行为的是后面几个隐式参数。
-
animation-duration（比如1s）必须设，否则默认是0s，等于没动 -
animation-iteration-count不写就是1，要循环得显式写infinite -
animation-timing-function推荐用linear，不然默认ease会让转圈“先快后慢”，看起来像卡顿 -
animation-direction默认normal，如果写了alternate又没配infinite，第二轮就会反转然后停住
.loader {
animation: spin 0.8s linear infinite;
}
为什么加了 animation 却不转？常见失效场景
不是代码写错，而是 CSS 优先级、渲染条件或硬件加速没跟上。尤其在移动端或低配设备上，不触发 GPU 加速时，transform 动画可能被降级为软件渲染，帧率掉到 10fps 以下，肉眼就“不动”。
- 父容器设了
overflow: hidden且子元素超出，可能裁掉动画区域（检查元素是否真被渲染出来） - 用了
position: static的普通块级元素，但没设宽高或border/content，结果 DOM 存在但尺寸为 0 —— 转了个寂寞 - Chrome 旧版对
transform+will-change组合敏感，加will-change: transform可能反而卡死，不如直接加transform: translateZ(0)强制 GPU 加速
纯 CSS 转圈，border 法比 svg 法更轻量吗？
看场景。如果只要一个简单圆圈，border + border-radius: 50% 确实够用；但想调颜色渐变、控制某一段空缺（比如进度感）、或适配深色模式自动换色，border 就硬编码死了。
-
border方案依赖transparent边框 + 实色边框模拟，animation无法单独驱动某条边，只能整圈转 -
svg的<circle></circle>或<path></path>可以用stroke-dasharray做“擦除式”加载，视觉更现代，但多了一层 DOM 结构 - 性能上差别不大，但
border法在 Safari iOS 15 之前有闪烁 bug，svg更稳
真正省事的点不在体积，而在维护性：改一圈颜色，border-color 改一次；改一圈渐变，就得切到 svg 里调 <lineargradient></lineargradient>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
