transform: rotate(360deg) 本身不触发动画，仅静态旋转；需配合 @keyframes 和 animation 属性才能实现连续旋转，且必须定义 from 和 to（或 0% 与 100%），并注意 transform-origin、兼容性及性能优化。
只写 transform: rotate(360deg) 图标不动？这是常态
因为 transform 本身不是动画，它只是静态样式。你加了这行，浏览器立刻把元素转到 360°，没有“过程”，也就没有“旋转感”。真正触发连续变化的，是 @keyframes + animation 的组合。
常见错误现象包括：
- 图标加了
transform: rotate(360deg)却纹丝不动 - 手动切 class 后“闪一下”才开始转（说明漏了
from帧或初始态未定义） - 转一圈就停（
animation-iteration-count没设infinite）
@keyframes spin 必须包含 from 和 to，不能只写 to
只写 to { transform: rotate(360deg); } 在部分浏览器（尤其是旧版 Safari 或 IE11）里可能跳帧、卡顿，甚至不执行。可靠写法是显式声明起止状态：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
或者用百分比（便于后续加中间帧）：
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
注意：
- 别用
rotateZ()或三维变体，避免意外触发层合成和性能开销 - IE11 要求补全前缀：
-ms-transform: rotate(360deg)，且主选择器需加-ms-animation: spin 1s linear infinite - 动画名（如
spin）必须和animation属性中引用的完全一致，大小写敏感
旋转中心偏移、抖动？先查 transform-origin 和元素尺寸
SVG 图标默认以左上角为旋转原点；普通块元素若没设宽高或 display 类型不对，也会导致视觉位移。这不是动画问题，而是布局问题。
实操建议：
- 给容器设固定宽高（如
width: 24px; height: 24px;），避免塌陷 - 显式写
transform-origin: center（虽然默认值就是center，但某些 SVG 场景下会被覆盖） - SVG 内联时，检查
viewBox是否与宽高比例一致，否则渲染错位 - Chrome 亚像素渲染偶尔抖动，可加
transform: translateZ(0)强制 GPU 加速（仅在确认抖动存在时启用）
animation-duration 设多少才合适？别迷信“1s”
1 秒是常用起点，但实际要匹配图标尺寸和用户预期：
- 小图标（16–24px）：0.8–1.2s 更顺眼；太快（如 0.5s）易晕，太慢（如 1.8s）像卡住
- 大图标（32px+）或 Modal 中的 loading：拉长到 1.5s，降低视觉压迫感
- 如果接口平均响应时间约 800ms，设 0.9s 动画周期，能更好对齐真实等待节奏
- 避免用 0.333s 这类非整数毫秒值——60fps 下反而可能丢帧
- 推荐把时长单独写成
animation-duration: 0.9s，方便 JS 后期动态调整（比如根据网络状况切换快/慢模式）
真正难的不是让图标转起来，而是转得稳、不抢焦点、不干扰语义、且在低端机上也不掉帧。动画本身很简单，细节堆叠起来才是门槛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
