必须用@keyframes定义完整动画（0%和100%帧缺一不可），配合animation属性触发；优先用:hover或.active类控制，加animation-fill-mode:forwards保持结束状态；注意transform-origin设置旋转中心，仅动画transform/opacity以保性能。
用 @keyframes 定义旋转动画，但别直接写 rotate(360deg) 到元素上
直接在元素上写 transform: rotate(360deg) 不会触发动画，它只是静态效果。必须配合 @keyframes + animation 才能动起来。关键点是：动画定义要完整，起始（0%）和结束（100%）状态都得明确写出来，哪怕起始是 rotate(0deg)。
常见错误是只写 100% { transform: rotate(360deg); }，漏掉 0% 帧，导致浏览器无法插值，动画不生效或跳变。
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }状态切换时触发旋转，优先用 :hover 或 .active 配合 animation
不要在伪类里写 transform: rotate(...) 然后指望它“自动过渡”——transform 的过渡需要显式声明 transition，而旋转动画更推荐用 animation 控制节奏和循环，尤其涉及多圈、方向、延迟等需求时。
-
:hover触发：适合鼠标悬停即开始一圈旋转 -
.active类控制：适合 js 控制状态（比如点击切换），更灵活 - 记得加
animation-fill-mode: forwards，否则动画结束后会弹回初始角度 - 如果想点击切换「旋转/停止」，JS 只需增删类名，css 负责定义该类下的
animation值
.spinner { animation: spin 1s linear; animation-fill-mode: forwards; } .spinner.active { animation: spin 2s ease-in-out infinite; } transform-origin 决定旋转中心点，不设默认是元素中心
很多旋转看起来“偏了”，其实是绕左上角转的——因为没设 transform-origin。默认值是 50% 50%（即中心），但一旦元素有 padding、border 或父容器 text-align: center 干扰，视觉中心就容易错位。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 图标类小元素：用
transform-origin: center最稳 - 需要绕左上角转（比如菜单箭头展开）：写
transform-origin: 0 0 - 绕底部中点翻转（如折叠面板）：用
transform-origin: bottom center - 避免用像素值（如
10px 20px），除非精确对齐有硬性要求
性能敏感场景下，别用 animation 驱动 transform 外的属性
如果同时给元素加了 animation: spin ... 和 color 或 background-color 动画，会导致频繁重绘（repaint），卡顿明显。旋转本身走的是合成层（compositor），很轻量；但颜色变化必须走主线程 paint。
优化要点：
- 确保只动画
transform和opacity这两个可硬件加速的属性 - 避免在旋转动画期间同时触发
height、width、left/top等触发布局（layout）的变更 - 移动端尤其注意：加
will-change: transform提前提示浏览器（但别滥用，仅在必要时）
.spinner { will-change: transform; animation: spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } 旋转动画真正难的不是写几行 CSS，而是状态边界是否清晰、transform-origin 是否符合预期、以及动画是否被其他样式拖进重排重绘陷阱。这些地方一松动，转着转着就卡住或偏移了。