用@keyframes定义图片旋转动画需指定0%和100%关键帧，使用transform:rotate(0deg)和rotate(360deg)；img元素须设display:inline-block或block，并通过animation:spin 2s linear infinite调用，transform-origin应写在元素选择器中而非@keyframes内。
如何用 @keyframes 定义图片旋转动画
直接在 CSS 中定义关键帧，用 transform: rotate() 控制角度变化。注意：必须指定起始（0%）和结束（100%）状态，否则动画不会触发。
-
0%必须写成0%或from，不能省略单位或写成0 - 旋转值推荐用
deg（如360deg），避免用turn或rad以防兼容性问题 - 如果只写
to { transform: rotate(360deg); }，缺少from，部分浏览器（尤其是旧版 Safari）可能不执行动画
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
给 ![css动画如何给图片添加旋转动画_通过@keyframes结合transform: rotate实现旋转]()
不能直接在 animation 就完事——需确保该元素是「可变换元素」，且未被其他样式（比如 display: block 以外的布局干扰）阻断动画渲染。
- 给
display: inline-block或block，否则在某些文档流中旋转中心可能偏移 - 用
animation: spin 2s linear infinite;调用，其中infinite表示循环，漏掉它就只转一次 - 若图片有父容器且设置了
overflow: hidden，旋转时边缘可能被裁切，需检查容器尺寸和transform-origin
img.rotate {
display: inline-block;
animation: spin 2s linear infinite;
}
transform-origin 对图片旋转中心的影响
默认以图片中心点（50% 50%）为轴心旋转。但很多场景需要绕左上角、底部中点等位置转，这时必须显式设置 transform-origin，且它要写在动画规则里或元素样式中，不能只写在 @keyframes 里。
- 写在
@keyframes内部无效：浏览器会忽略transform-origin的关键帧动画 - 正确做法是把
transform-origin放在调用动画的元素选择器中，例如img.rotate { transform-origin: top left; } - 值支持关键字（
center、top）、百分比（20% 80%）、长度（10px 2em），注意两个值顺序是x y
常见动效失效原因和调试建议
图片没转，大概率不是代码写错，而是被隐性规则拦截。优先检查这几项：
立即学习“前端免费学习笔记（深入）”；
- 图片是否加载失败？
- 是否启用了硬件加速？加
transform: translateZ(0);到动画元素可强制 GPU 渲染，解决部分安卓 WebView 卡顿或闪屏 - 是否被
will-change: transform过早触发？仅在必要时添加，滥用会导致内存占用升高 - 使用
animation-play-state: paused临时暂停，配合 DevTools 的动画审查器（Chrome 的 Rendering 面板 → Animations）逐帧查看角度是否更新
旋转动画看似简单，但 transform-origin 的作用域、display 类型对变换基点的影响、以及图片加载状态对动画表现的干扰，这三点最容易被跳过验证。
