必须显式设置 animation-iteration-count: infinite，否则动画只执行一次；需写全 animation: spin 2s linear infinite 三参数，linear 防卡顿，infinite 控制循环，动画名大小写与 @keyframes 严格一致，rotate 角度单位统一为 deg，transform-origin 设为 center，inline 元素需 display: inline-block，避免 filter 等阻碍硬件加速。
必须显式设置 animation-iteration-count: infinite，否则动画只执行一次——这是 90% 的“转一圈就停”问题的根源。
animation: spin 2s linear infinite 必须写全三个关键参数
很多人只写 animation: spin 2s，漏掉 linear 和 infinite，结果出现顿挫或单次播放：
-
linear是必须的：默认ease会让旋转在起止点明显减速，连续循环时像“卡顿”，不是匀速转 -
infinite不能省略：浏览器默认值是1，不是无限；哪怕写了@keyframes定义了 0→360，没它就不循环 - 动画名（如
spin）必须和@keyframes spin完全一致，大小写敏感，拼错就无效
@keyframes 中 rotate(0deg) → rotate(360deg) 不能简写成 0 → 360
单位不统一会导致旧版 Safari 解析失败或动画不触发：
- 错误写法：
from { transform: rotate(0); } to { transform: rotate(360deg); }（0无单位，360deg有单位） - 正确写法：
from { transform: rotate(0deg); } to { transform: rotate(360deg); } - 别用
rotate(720deg)：某些 iOS Safari 对大角度插值异常，360deg 最稳
transform-origin 不设就是左上角，不是你想要的“绕中心转”
没声明 transform-origin 时，rotate() 默认绕元素盒模型左上角（0 0），视觉上像“甩出去”：
- 通用解法：
transform-origin: center;或transform-origin: 50% 50%; - 对
<img>或<span></span>这类 inline 元素，先加display: inline-block;，否则transform-origin可能被忽略 - 在 flex 容器里，如果父级有
align-items: center，某些 Chrome 版本会截断 transform，建议给旋转元素加align-self: flex-start;避免冲突
动画卡顿？别急着加 will-change，先看硬件加速是否生效
will-change: transform 不是万能药，滥用反而拖慢渲染：
- 真正触发 GPU 加速的是
transform和opacity属性本身，只要用了rotate()，现代浏览器基本自动启用 - 仅当页面滚动/缩放时频繁重绘导致掉帧，才考虑加
will-change: transform，且动画结束后应移除（JS 控制） - 更常见卡顿原因：父容器用了
filter、box-shadow或大量background-image，这些会阻止合成层提升
最易被忽略的是：动画名大小写、单位一致性、以及 inline 元素未设 display —— 这三处出错，代码看着全对，但就是不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
