无限循环旋转的核心是 animation-iteration-count: infinite；必须显式设置，否则默认只执行一次；rotate(360deg) 与 rotate(0) 效果相同但需值不同才能触发动画；transform-origin 需显式声明以确保旋转中心准确；硬件加速可缓解卡顿。
animation-iteration-count: infinite 不能省略
无限循环旋转的核心不是 @keyframes 本身，而是动画播放次数的控制。即使你定义了从 0deg 到 360deg 的旋转，若没显式设置 animation-iteration-count: infinite，它默认只执行一次。很多初学者写完 @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } 就以为完事了，结果元素转一圈就停——问题就出在这里。
实操建议：
-
animation-iteration-count必须设为infinite，不能依赖浏览器默认值 - 推荐写法是合并进简写属性：
animation: spin 2s linear infinite; - 若用 JS 动态添加类触发动画，也要确保该类包含
infinite，否则移除类再加回也不会重播
transform-origin 影响旋转中心点
默认情况下，transform: rotate() 绕元素盒模型中心（即 50% 50%）旋转。但如果你看到旋转“偏了”或“晃动”，大概率是元素本身有内边距、边框、或父容器用了 text-align: center 等干扰布局的样式，导致视觉中心和变换原点不一致。
实操建议：
- 显式声明
transform-origin: center;或transform-origin: 50% 50%;，避免继承或计算偏差 - 对 inline 元素（如
）做旋转时，先设display: inline-block;，否则transform-origin可能失效 - 如果要绕左上角旋转，用
transform-origin: 0 0;，但注意这会改变元素在文档流中的占位表现
rotate(360deg) 和 rotate(0) 在 keyframes 中效果相同但有区别
从渲染结果看，from { transform: rotate(0); } to { transform: rotate(360deg); } 和 from { transform: rotate(0); } to { transform: rotate(0); } 都不会产生可见变化——但后者根本不会触发动画。CSS 动画只在关键帧之间存在**可插值变换**时才运行。
实操建议：
- 必须让起始帧和结束帧的
rotate()值不同，哪怕写成rotate(0.001deg)也能触发（不推荐，仅说明原理） - 更稳妥的是统一用
0deg → 360deg，语义清晰且兼容性好；避免用720deg等多圈写法，某些旧版 Safari 对大角度插值有异常 - 不要混用单位：比如
rotate(0)（无单位）和rotate(360deg)在部分浏览器中可能被当作不同类型而无法平滑过渡
动画卡顿？检查 will-change 和硬件加速
纯 CSS 旋转在多数现代浏览器中性能不错，但若元素内容复杂、或同时叠加多个动画（比如旋转 + 渐变 + 缩放），容易掉帧。这不是 @keyframes 写得不对，而是浏览器没启用 GPU 加速。
实操建议：
- 给旋转元素加
will-change: transform;，提示浏览器提前优化；但别滥用，只加在真正需要动画的元素上 - 确保
transform是独立的合成层，可加transform: rotate(0deg) translateZ(0);强制提升图层（translateZ(0)是常见 hack，现代 CSS 推荐用contain: paint;替代） - 避免在旋转元素上频繁修改
width/height/margin等触发重排的属性，否则动画必然卡顿
动画是否“无限”取决于播放控制，是否“平滑”取决于变换原点与硬件加速策略，而是否“生效”往往卡在单位一致性或元素显示类型上。这些细节不报错，但一动就出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
