最常用旋转加载动画用@keyframes定义rotate(360deg)并配合animation: 0.9s spin linear infinite；需避免漏写时长或名称、误用rotateZ、实线边框性能差等问题。
怎么用 @keyframes 写一个旋转加载动画
最常用的就是一圈圈转的圆圈，核心是定义旋转动作 + 应用到元素上。@keyframes 里写好从 0% 到 100% 的 transform: rotate()，然后用 animation 属性调用它。
常见错误是忘了加 animation-timing-function: linear，结果转起来一顿一顿的；或者漏了 animation-iteration-count: infinite，只转一次就停了。
-
@keyframes spin必须有名字，且名字要和animation-name完全一致（区分大小写） - 推荐用
transform: rotate(360deg)，别用rotateZ—— 兼容性差，旧版 Safari 会失效 - 动画时长建议设为
0.8s～1.2s：太快眼花，太慢像卡住
为什么 animation 缩写属性里必须写时长和名字
因为 animation 是复合属性，缺了任意一个必要值（时长、名字），整条声明就会被浏览器忽略 —— 页面上啥也不动，控制台还不报错，特别难排查。
比如 animation: spin; 看似简洁，但没时长，等于无效；animation: 1s; 没名字，也白搭。
- 最低可用写法是：
animation: 1s spin; - 加上循环和匀速更稳妥：
animation: 0.9s spin linear infinite; - 别把
animation-delay或animation-direction单独提出来写，容易覆盖缩写里已设的值
用 border 做环形加载器时，为什么虚线比实线更省性能
纯 border 加旋转的方案里，用 border-style: solid 会导致浏览器在每一帧都重绘整个边框像素，低端机上容易掉帧；换成 dashed 或 dotted 后，渲染压力明显下降。
这不是玄学 —— 实线 border 的抗锯齿计算更重，尤其在高 DPR 屏幕上。而虚线本质是重复绘制短段落，GPU 更容易优化。
- 示例：
border: 4px dashed #007bff;+border-radius: 50%就能出环形效果 - 注意：Safari 对
dashed在transform下的渲染有小偏差，如果要求严苛，改用 SVG<circle></circle>+stroke-dasharray - 别用
box-shadow模拟边框来“取巧”，叠加层数一多，Composite 时间飙升
IE11 能不能跑 @keyframes 动画
能，但限制很多：不支持 animation-play-state，不支持 animation-fill-mode: backwards，而且 @keyframes 名字不能带中划线（比如 load-spin 会失败，得写成 loadspin）。
更关键的是，IE11 对 transform 的硬件加速支持极弱，纯靠 CPU 渲染旋转动画，哪怕只是 20×20px 的小圆点，持续转 10 秒以上就可能触发页面卡顿。
- 兼容写法必须加前缀：
@-ms-keyframes spin { ... }和animation: -ms-spin 1s infinite; - 别在 IE11 里给加载动画加阴影或渐变色边框，渲染开销翻倍
- 如果项目还必须支持 IE11，建议降级为 GIF，比硬扛 CSS 动画更稳
真正麻烦的不是写法，而是动画一旦开始，就很难在不重绘 DOM 的前提下暂停或替换 —— 这个细节，上线前用真机连上 DevTools 的 Rendering 面板看一眼帧率，比读十遍文档都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
