最常用兼容性最好的Loading动画是无限旋转圆圈，需用@keyframes定义360°匀速旋转，配合animation: spin 1s linear infinite，并设display:block/inline-block、vertical-align:middle及硬件加速等细节优化。
用 @keyframes 定义旋转类加载动画
最常用、兼容性最好的 Loading 动画是无限旋转的圆圈，核心是定义一个 360° 旋转的关键帧。注意：必须给元素设 display: inline-block 或 block，否则 transform 在某些浏览器（如旧版 Safari）中可能不生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 动画名取语义化名称，比如
spin，避免用loading这类泛称（易冲突） - 起始帧（
0%）和结束帧（100%）的transform: rotate()值要严格匹配，否则动画会“跳变” - 别漏写
to关键字的等价写法 ——100% { transform: rotate(360deg); }比to { ... }兼容性更好
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
给元素应用 animation 并控制行为
光有关键帧不够，必须用 animation 属性挂载。这里最容易出错的是时长与缓动函数搭配不当，导致转得“卡”或“晕”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 时长建议设为
0.8s～1.2s：太短（如0.3s）人眼难识别循环，太长（如2s）显得卡顿 - 用
linear缓动，避免ease或ease-in-out—— 旋转动画需要匀速才自然 - 必须显式写
infinite，否则只播一次就停；running是默认值，不用额外写
.loader {
width: 24px;
height: 24px;
border: 2px solid #eee;
border-top-color: #333;
border-radius: 50%;
animation: spin 1s linear infinite;
}
解决 IE11 及部分安卓 WebView 的兼容问题
IE11 不支持 transform: rotate() 在伪元素上动画，且老安卓 WebView 对 @keyframes 解析不稳定。绕过方式不是加前缀，而是换结构。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃用
::after画圆，改用真实<div class="loader"></div>元素 - 对 IE11 加 fallback：用
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)（仅限静态旋转，所以只作降级提示） - 安卓 4.4 WebView 中，
animation若没触发，尝试加transform: translateZ(0)强制硬件加速
避免布局抖动和意外重绘
加载动画常被插在文字旁，但默认 vertical-align: baseline 会让它和文字对不齐，且旋转时若容器没设 overflow: hidden，可能溢出边框。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
.loader加vertical-align: middle，比top或bottom更稳 - 父容器如果高度固定，记得设
line-height匹配，否则文字会“跳” - 动画元素不要用
width: auto或依赖内容撑开，否则每次重排都可能引发重绘
真正麻烦的不是写动画，是让动画在各种缩放、字体设置、暗色模式切换下都不偏移、不闪烁、不触发 layout thrashing —— 这些细节往往要靠 devtools > Rendering > Paint flashing 实测才能揪出来。
