用@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}配合animation:spin 1s linear infinite实现顺滑无限旋转，需设transform-origin、元素宽高及避免奇数边框导致的渲染模糊。
如何用 @keyframes 实现无限旋转动画
直接写一个从 0deg 到 360deg 的关键帧，再用 animation 调用它，就能让元素转起来。重点不是“怎么动”，而是“怎么动得顺、不卡、不抖”。
常见错误是漏写 transform-origin，导致旋转中心偏移；或者用 rotate(360deg) 单帧硬切，浏览器可能跳帧或闪一下。
-
@keyframes spin必须包含from和to（或 0% / 100%），不能只写to { transform: rotate(360deg); } - 推荐用
transform: rotate(360deg)，别用rotateZ()或其他三维写法，避免触发不必要的层合成 - 动画时长建议设为
0.8s~1.2s，太短易晕，太长显得卡顿
为什么 animation: spin 1s linear infinite 有时不动
最常踩的坑是：元素没有尺寸，或者被 display: none / visibility: hidden 拦住了。CSS 动画不会在不可见/无盒模型的元素上执行。
另一个隐蔽问题是父容器设置了 overflow: hidden，而旋转元素带阴影或伪元素超出边界，导致渲染被裁剪，看起来像“没动”。
- 先确保元素有宽高：
width: 24px; height: 24px;，或用border临时验证是否渲染 - 检查 computed styles，确认
animation-name和animation-duration确实生效，而不是被后声明的规则覆盖 - 如果用了
will-change: transform，记得只在需要时加，长期开启反而拖慢性能
用 border 画圆环加载器时旋转发虚怎么办
这是 Safari 和部分 Chrome 版本的老问题：当元素只有 border、无背景且边框宽度为奇数像素时，transform: rotate() 会因亚像素渲染导致边缘模糊或闪烁。
根本原因不是动画本身，而是浏览器对空心边框做几何变换时的光栅化策略。
- 把边框设成偶数像素，比如
border: 2px solid #007bff - 加
transform: translateZ(0)强制启用 GPU 合成（注意：在低端安卓机上可能适得其反） - 更稳妥的做法是改用
svg+stroke-dasharray配合stroke-dashoffset动画，完全规避 CSS 渲染缺陷
如何让旋转图标在页面加载完成时自动停住
纯 CSS 无法监听 JS 的 DOMContentLoaded 或 load 事件，所以“自动停”必须靠 JS 控制 class 切换。
不要用 animation-play-state: paused 初始化，因为首次渲染时动画状态未定义，容易出现首帧跳变。
- 初始样式写成
.spinner { animation: none; }，JS 加载完后加.spinner.is-loading类来启动动画 - 停用时用
element.classList.remove('is-loading')，配合 CSS 中.is-loading { animation: spin 1s linear infinite; } - 如果需平滑停止（比如减速收尾），得用 JS 监听动画结束并补一帧
rotate(359deg)，但多数场景没必要——用户只关心“转”和“不转”两个状态
真正难的是协调多个异步资源的加载状态，而不是旋转本身。图标只是个视觉信号，背后的状态管理才容易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
