应添加 transition 属性，如 transition: transform 0.5s ease-out，并为常态设置 transform: rotate(0deg)，否则因缺失过渡声明导致瞬时跳变或卡顿。
hover 时用 transform: rotate() 做旋转，为什么卡顿或不自然
直接写 transform: rotate(360deg) 在 :hover 里，浏览器默认用「瞬时切换」方式过渡，没有缓动曲线，视觉上就是“啪”一下转完，或者跳帧。根本原因是没声明过渡行为，CSS 不知道该用什么时间、什么节奏来变。
- 必须显式加
transition，且要指定transform属性（不能只写all，否则可能触发重排或意外动画） - 旋转角度建议用
deg或turn（比如1turn= 360deg），避免小数精度问题影响循环动画 - 动画时长别太短（
0.2s以下难感知缓动），也别太长（1s以上易显拖沓），0.4s–0.6s是较稳妥的区间
用 transition 实现 hover 旋转的最小可行写法
不需要 keyframes，纯 CSS 就能搞定平滑旋转。关键是把过渡逻辑写在常态规则里，而不是只塞在 hover 中。
button {
transform: rotate(0deg);
transition: transform 0.5s ease-out;
}
button:hover {
transform: rotate(360deg);
}
-
ease-out让旋转后半程稍慢，比linear更有“惯性感”，比ease更干净利落 - 务必给常态（非 hover）也写
transform: rotate(0deg)，否则首次 hover 可能从隐式初始值开始过渡，导致方向异常 - 如果按钮本身有其他 transform（如
scale或translate），必须合并写，比如transform: rotate(0deg) scale(1)，否则会覆盖
需要循环自转或复杂节奏？才用 @keyframes
只有两种情况值得上 keyframes：一是想让按钮「持续自转」（比如加载状态），二是 hover 后要执行多段节奏（如先快转半圈再慢停）。普通悬停单次旋转，transition 更轻量、更可控。
- 用 keyframes 时，
animation必须加在常态上，并用animation-play-state: paused控制启停；hover 里只改状态，不重复定义动画 - 别在
:hover里直接写animation: spin 1s linear—— 这会导致每次悬停都重启动画，中断未完成的上一次 - 若真要用 keyframes 实现悬停单次旋转，记得设
animation-fill-mode: forwards，否则动画结束立刻回弹
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
button {
animation: spin 0.6s ease-out 1 forwards;
animation-play-state: paused;
}
button:hover {
animation-play-state: running;
}
容易被忽略的兼容性和性能细节
rotate 动画本身兼容性极好（IE10+ 都支持），但「自然」与否，真正卡在硬件加速和重绘策略上。
立即学习“前端免费学习笔记（深入）”；
- 加
transform: translateZ(0)或will-change: transform可强制 GPU 加速，尤其在旧版 Safari 或低端安卓机上明显改善帧率 - 避免同时对同一元素做
transform和box-shadow/filter的 hover 动画 —— 容易触发全层重绘，导致掉帧 - 如果按钮是 inline 元素（如
），记得先设display: inline-block或block，否则 transform 可能不生效
transition: transform 0.5s ease-out 就够了。keyframes 看似灵活，但多一层状态管理，稍不注意就出现动画打架或无法暂停的问题。 
