真正循环旋转需定义@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}，设transform-origin:center和animation-timing-function:linear。
animation: rotate infinite 怎么写才真正循环起来
直接给 animation 加 infinite 不等于自动无限旋转——漏掉关键帧定义或时序函数，动画会卡住、跳变，甚至根本不动。
必须显式定义 @keyframes，且起止状态要一致（比如都用 rotate(0deg)），否则浏览器无法平滑衔接下一圈。
-
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }是最简可靠写法 - 别用
0% { ... } 100% { ... }混用单位（如rotate(0)和rotate(360deg)），部分旧版 Safari 会解析失败 - 动画名和选择器里的
animation-name必须完全一致，大小写敏感
transform-origin 影响旋转中心点，不设默认在左上角
没设 transform-origin 时，rotate() 围绕元素盒模型左上角转，看起来像“甩出去”，不是绕自身中心匀速转。
绝大多数场景应显式设为 center 或 50% 50%，尤其当元素宽高不固定、或父容器有 padding 时，center 更稳定。
立即学习“前端免费学习笔记（深入）”；
-
transform-origin: center;兼容性好，IE9+ 支持 - 避免用
top left这类关键词组合，不同浏览器解析略有差异 - 如果元素是 inline 元素（如
<span></span>），先加display: inline-block;再设transform-origin，否则无效
animation-timing-function 控制转得“顺不顺”，ease 默认值容易误判
默认的 ease 是先慢后快再慢，一圈结束瞬间有明显停顿感，连续播放时像“顿挫”；真要匀速转，必须改用 linear。
另外，animation-iteration-count: infinite 和 animation-direction: normal 是默认值，不用重复写，但一旦加了 alternate 就不再是单向旋转了。
- 匀速旋转：用
animation-timing-function: linear; - 想加点机械感（比如齿轮），可用
cubic-bezier(0.3, 0.7, 0.7, 0.3)微调节奏 - 别把
animation-play-state: paused遗留在样式里，调试完记得删，否则动画永远不启动
rotate 动画在 flex/grid 容器里可能失效
当旋转元素是 flex item 或 grid item，且父容器设置了 align-items: center 等对齐方式时，某些 Chrome 版本下 transform 会被重置或截断，导致旋转卡在第一帧。
本质是 layout 触发的重绘冲突，不是 CSS 写错了。
- 临时解法：给旋转元素加
transform: translateZ(0);强制启用 GPU 层 - 更稳做法：在外层包一个非 flex/grid 的
<div>，只让这个 wrapper 做布局，旋转放在内层 <li>检查 DevTools 的 “Computed” 面板里 <code>transform是否被标记为invalid或显示为空——那是典型渲染层打架信号
事情说清了就结束。旋转动画看着简单，但
transform-origin、timing-function 和布局上下文这三处，最容易在上线前一刻突然出问题。
