用@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); }
}
给
不能直接在 上写 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
常见动效失效原因和调试建议
图片没转，大概率不是代码写错，而是被隐性规则拦截。优先检查这几项：
