定义旋转动画时必须显式声明起始角度，如@keyframes spin {0%{transform:rotate(0deg) translateZ(0);}100%{transform:rotate(360deg) translateZ(0);}}，并避免transition与animation在transform上混用，启用GPU加速提升流畅度。
用 @keyframes 定义旋转动画时，transform: rotate() 的起始值必须明确
直接写 @keyframes spin { to { transform: rotate(360deg); } } 会导致悬停瞬间跳转——因为没定义 from 状态，浏览器会从元素当前 transform 值（通常是 none）开始插值，而 none 和 rotate(360deg) 不是同类型值，动画可能不触发或行为异常。
必须显式写出起始角度：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
更稳妥的做法是用百分比写法，兼容性更好，也方便加缓动：
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
:hover 触发动画时，transition 和 animation 不能混用在同一个 transform 上
如果元素本身已有 transition: transform 0.3s，再在 :hover 里写 animation: spin 0.8s，两者会冲突——transform 属性被同时由过渡和动画控制，结果不可预测（常见表现是旋转卡顿、只转一半、或根本不动）。
- 选
animation：移除所有涉及transform的transition声明 - 选
transition：改用:hover { transform: rotate(360deg); }，不用 keyframes - 真要混合？把旋转抽到独立的
transform: rotate()+ 其他变换（如scale）用transition，但实际中极少需要
图片旋转动画卡顿？检查是否启用了硬件加速
CSS 动画默认走软件渲染，尤其在旧版 Chrome 或移动端，rotate() 可能掉帧。强制启用 GPU 加速能明显改善：
立即学习“前端免费学习笔记（深入）”；
- 在动画的
from或元素基础样式中加transform: translateZ(0)或will-change: transform - 推荐写法（不影响布局，兼容性好）：
transform: rotate(0deg) translateZ(0) - 避免滥用
will-change，只加在真正需要动画的元素上，否则可能引发内存或闪烁问题
完整示例：
img {
display: inline-block;
transform: rotate(0deg) translateZ(0);
animation: spin 0.8s ease-in-out forwards;
}
img:hover {
animation: spin 0.8s ease-in-out forwards;
}
@keyframes spin {
0% { transform: rotate(0deg) translateZ(0); }
100% { transform: rotate(360deg) translateZ(0); }
}
动画只执行一次？用 animation-iteration-count 控制循环
默认 animation-iteration-count 是 1，悬停一次就转一圈，松开鼠标就停在 360deg——这通常不是想要的效果。常见需求有：
- 悬停期间持续匀速旋转：
animation-iteration-count: infinite - 悬停时转一圈后停在终点：
animation-fill-mode: forwards+animation-iteration-count: 1 - 悬停时正向转一圈，移出时反向转回：
animation-direction: alternate+infinite，但需注意forwards会失效
最常用组合（悬停即转，移出即停在原位）：
img:hover {
animation: spin 0.8s ease-in-out forwards;
}
@keyframes spin {
0% { transform: rotate(0deg) translateZ(0); }
100% { transform: rotate(360deg) translateZ(0); }
}
关键点在于：移出时没有新动画，浏览器自动还原为元素原本的 transform 值（即 rotate(0deg) translateZ(0)），所以不会残留旋转状态。
transform 初始值、animation-fill-mode 和是否有其他 transform 声明干扰——这些细节比写对 keyframes 更容易出错。 
