图标不动是因为只定义了@keyframes却未在元素上声明animation属性；必须同时满足定义动画和应用animation，且名称一致、设置duration、指定transform-origin。
用 @keyframes 定义旋转动画时，为什么图标不动？
常见错误是只写了关键帧，但没把动画挂到元素上。CSS 动画必须同时满足两个条件：定义 @keyframes + 在元素上声明 animation 属性。
实操建议：
-
@keyframes名称要和animation-name完全一致（区分大小写） - 必须设置
animation-duration，哪怕只是0.01s，否则浏览器认为“不播放” - 旋转起点默认是元素左上角，加
transform-origin: center;才绕中心转
```css
@keyframes spin {
to { transform: rotate(360deg); }
}
.icon {
animation: spin 1s linear infinite;
transform-origin: center;
}
```
让 SVG 图标平滑旋转，transform 和 rotate() 怎么配？
直接对 SVG 元素写 rotate() 不起作用，因为 SVG 的 transform 属性语法和 CSS 不同；必须用 CSS 的 transform 才能配合 @keyframes。
实操建议：
- 给
<svg></svg>或内部的<path></path>加类名，用 CSS 控制，别碰 SVG 的transform属性 - 避免在 SVG 标签里写
style="transform:..."，容易被内联样式覆盖或解析异常 - 如果图标有描边（
stroke），旋转时可能因抗锯齿轻微抖动，加will-change: transform;可缓解
infinite 循环下，动画卡顿或跳帧怎么办？
不是所有“无限循环”都真正流畅——尤其在低性能设备或复杂页面中，transform 被阻塞时会掉帧，表现为一顿一顿地转。
实操建议：
- 确保只动画
transform和opacity，避免触发布局（width、left）或重绘（color、background） - 加
transform: translateZ(0);或will-change: transform;强制 GPU 加速（但别滥用，开多了反而拖慢） - 用
animation-timing-function: steps(1)可以强制跳变式旋转（比如齿轮感），但普通旋转推荐linear
IE 和旧版 Safari 对旋转动画的支持差异在哪？
IE10+ 支持 @keyframes，但需要 -ms- 前缀；Safari 8–13.1 需要 -webkit- 前缀，且不支持 transform-origin 在某些 SVG 场景下的表现。
实操建议：
- 写动画时，先写标准属性，再紧跟着写带前缀的版本（顺序不能错）
- 旧 Safari 下 SVG 旋转偏移，可改用
<g transform="rotate(...)">...</g>+ JS 定时更新，而非纯 CSS - 如果项目还要兼容 IE，
infinite在 IE 中偶发卡住，加animation-iteration-count: 999;是更稳的替代方案
动画真正跑起来之后，最容易被忽略的是图标的视觉锚点——你以为它绕中心转，其实默认绕左上角；还有就是 infinite 看似省事，但在长页面滚动或 Tab 切换后，有些浏览器会暂停动画再恢复，造成一次微小的错帧。这些细节不报错，但用户一眼就觉着“不顺”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
