纯CSS实现无限旋转loading动画需同时满足三个条件：animation必须包含infinite、linear和显式时长，@keyframes起止值统一用0deg，且需通过单边高亮边框+border-radius:50%构建环形视觉效果。
无限循环旋转 loading 动画完全可以用纯 CSS 实现，关键不是“能不能”，而是 animation 的几个参数必须同时满足：infinite 不能漏、linear 必须显式写、@keyframes 起止值要一致——缺一不可，否则动画播完就停或卡顿。
为什么 animation: spin 1s 不会无限转？
因为 animation-iteration-count 默认值是 1，不是 infinite。浏览器按规范解析简写属性时，没写的就用默认值，不会“自动推断你要循环”。
-
animation: spin 1s;→ 只转 1 圈，然后静止 -
animation: spin 1s linear;→ 还是只转 1 圈，且首尾有缓动（ease），看起来像“启动慢、刹不住” -
animation: spin 1s linear infinite;→ ✅ 正确写法，三者缺一不可
rotate(0deg) 到 rotate(360deg) 为啥有时卡顿？
不是语法错，但浏览器对 360deg 的插值处理可能在帧率低时暴露衔接瑕疵——它被当作一个独立角度值，而非“回到起点”的语义。更稳妥的做法是统一用 0deg 起止，靠 linear 保证匀速过渡。
- 推荐写法：
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(0deg); } } - 别在
to里加transform: rotate(360deg)——多余，还可能干扰插值逻辑 - 如果真要用
360deg，确保动画时长 ≥ 0.8s，避免人眼察觉跳变
border-radius: 50% 和边框颜色怎么配才出环形效果？
旋转的不是“整个 div”，而是靠边框粗细 + 单边实色 + 圆角形成的视觉缺口。这个缺口随旋转移动，才让人感知到“在转”。
立即学习“前端免费学习笔记（深入）”；
-
border-radius: 50%必须写，否则是方块打转 - 至少设四边边框，例如：
border: 4px solid rgba(255,255,255,0.3) - 再单独覆盖一边，如：
border-top: 4px solid #007bff，形成高对比“头” - 元素需为块级且尺寸固定（
display: inline-block或block），否则宽高可能失效
animationend 事件在 infinite 下永远不触发
只要 animation-iteration-count: infinite 生效，animationend 就彻底失联。这不是 bug，是规范行为——没有“结束”，自然没有事件。
- 想做每圈回调？得用 JS 手动计时，比如
setInterval模拟，别监听事件 - 想控制启停？用
animation-play-state: paused / running，配合 class 切换 - GPU 加速可加
transform: translateZ(0)或will-change: transform，但非必需，现代浏览器大多自动优化
真正容易被忽略的是：动画元素必须脱离文档流干扰（比如父容器有 overflow: hidden 或 flex 自动缩放），否则旋转时可能被裁切或触发重排。动手前先检查父级样式是否干净。
