外边框不转是因为未设置transform-origin或元素无尺寸/边框；需设宽高、边框、animation及匹配的@keyframes，检查display、overflow、transition误用和class名拼写。
用 @keyframes 实现旋转动画时，为什么外边框不转？
因为默认情况下，border 本身没有“旋转中心”概念，你得明确告诉浏览器：以哪个点为轴心转。常见错误是只写了 transform: rotate(360deg)，但没配 transform-origin，或者元素没尺寸、没边框、没显式设置 display: inline-block 等导致渲染不可见。
- 必须给元素设固定宽高（哪怕
width: 20px; height: 20px），否则空盒子转了也看不见 -
border要至少设一边（比如border-top: 3px solid #007bff），纯outline或box-shadow不参与 transform -
transform-origin推荐设为center，否则可能偏移或缩放错位 - 别忘了加
animation: spin 1s linear infinite，且spin名称要和@keyframes里一致
CSS @keyframes spin 的最小可用写法
不用写全 0% → 100%，也不用加浏览器前缀（现代主流浏览器都支持标准写法）。关键就三行：定义名、起始角度、结束角度。中间过程由浏览器自动补帧。
```css
@keyframes spin {
to { transform: rotate(360deg); }
}
```
- 用
to比100%更简洁；from可省略，默认是rotate(0deg) - 别写
rotate(1turn)—— 虽然语义清晰，但部分旧版 Safari 渲染不稳定 - 动画时长建议从
0.8s到1.2s之间，太慢显得卡顿，太快像闪屏
为什么加了动画还是不动？检查这四个地方
90% 的“转不动”问题出在渲染层，不是动画逻辑错。
- 元素是否被
display: none或visibility: hidden拦截？后者会保留空间但不触发动画 - 父容器有没有
overflow: hidden且子元素旋转后超出裁剪——看起来像“没动”，其实是被切掉了 - 是否误用了
transition替代animation？transition需要触发状态变化（比如 hover），不能自启动 - 有没有在 JS 里动态增删 class 时，class 名拼错？比如写成
loading-spin但 CSS 里是.loader-spin
纯 CSS 加载圈要不要加 will-change: transform？
一般不用。这个属性是给浏览器的“性能提示”，但对简单旋转小图标反而可能引发额外重绘开销，尤其在低端安卓 WebView 中容易导致掉帧。
- 真正需要它的情况：动画元素频繁变化、叠加多层、或配合
opacity+transform复合动画 - 更稳妥的优化是确保该元素是独立合成层（例如加
transform: translateZ(0)），比will-change更可控 - 如果用在按钮禁用态的加载图标上，注意同时关掉 pointer-events：
pointer-events: none，避免用户误点两次
动画本身很简单，难的是让那个圈在各种嵌套、flex、定位上下文中都稳稳转起来——往往卡住的不是 keyframes，而是它前面那三行布局代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
