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