用 transform: rotate() 做旋转动画必须配合 @keyframes 和 animation 属性；仅写 transform 不会触发动画，需定义 @keyframes spin { to { transform: rotate(360deg); } }，并设置 animation-timing-function: linear 和 animation-iteration-count: infinite 才能实现匀速无限旋转。
用 transform: rotate() 做旋转动画必须配 animation-timing-function
只写 transform: rotate(360deg) 不会动——CSS 变换本身不是动画，得靠 @keyframes 驱动。常见错误是直接在元素上加旋转样式，结果图标纹丝不动。
- 必须定义
@keyframes，比如@keyframes spin { to { transform: rotate(360deg); } } - 动画默认是
ease，转起来有快慢变化，加载图标要匀速就显式写linear - 别漏掉
animation-iteration-count: infinite，否则只转一圈就停了 - IE 10+ 和所有现代浏览器都支持，但旧版 Safari（-webkit-transform 前缀
animation: spin 1s linear infinite 里的时间值怎么选
1 秒是常见起点，但实际要看图标大小、视觉节奏和用户等待预期。太慢显得卡顿，太快又让人眼晕。
- 小图标（16–24px）建议 0.8–1.2s；大图标（32px+）可拉长到 1.5s，避免视觉压迫
- 如果后端接口平均响应在 800ms 左右，动画周期设为 0.9s 更匹配真实等待感
- 不要用
0.333s这类非整数毫秒值——浏览器渲染帧率（60fps）下反而可能丢帧 - 用
animation-duration单独写比写在简写里更方便后期覆盖（比如用 JS 动态调整）
SVG 图标旋转时发生位移或缩放抖动
SVG 元素默认以左上角为旋转原点，transform-origin 不设对就会偏移。另外，部分 SVG 内嵌 viewBox 或 width/height 不一致也会引发渲染错位。
- 统一加
transform-origin: center，确保绕中心转 - 给 SVG 外层容器设固定宽高（如
width: 24px; height: 24px;），避免父容器塌陷导致定位漂移 - 如果 SVG 是通过
<use></use>引用的，记得在<symbol></symbol>或目标元素上也加transform-origin - Chrome 有时对 SVG
transform渲染有亚像素问题，可加will-change: transform强制 GPU 加速（但别滥用）
用伪元素 ::before 实现加载图标比内联 SVG 更轻量
不需要额外 DOM 节点，适合按钮、输入框等小范围加载状态。但要注意内容可访问性和 CSS 优先级。
- 伪元素需设
content: ""和display: inline-block才能生效 - 旋转动画加在伪元素上，主元素保持交互区域不变
- 用
aria-busy="true"配合伪元素，屏幕阅读器才能感知加载状态 - 如果按钮文字和图标共存，用
margin-left或padding-left预留空间，避免动画时文字跳动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
