最简可用加载动画需满足：名字唯一，且含from和to（或0%/100%）；绑定到真实元素并确保其可见、有尺寸；用transform: rotate()而非left/top；JS控制启停以对齐请求节奏。
怎么用 @keyframes 定义一个最简可用的加载动画
关键不是写多炫，而是让浏览器能识别并触发重绘。必须满足两个硬条件：名字唯一、至少包含 from 和 to（或 0% / 100%）。
常见错误是只写 0% 没写 100%，或者名字里用了短横线（loading-spin）但调用时忘了引号——CSS 会静默失败，控制台也不报错。
-
@keyframes spin可以，@keyframes loading-spin必须写成animation: 'loading-spin' 1s linear infinite - 旋转动画优先用
transform: rotate()，别用left/top，前者走 GPU 合成，不触发布局重排 - 如果动画只在页面刚打开时播一次，记得加
animation-fill-mode: forwards，否则元素会跳回初始状态
```css
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loading {
animation: spin 0.8s ease-in-out infinite;
}
```为什么加了 @keyframes 动画还是不动
90% 是因为没把动画绑定到真实元素上，或者绑定方式有坑。CSS 动画不会自动播放，必须通过 animation 或其子属性显式启用。
容易被忽略的点：display: none 的元素、visibility: hidden 的元素、尚未插入 DOM 的节点，都不会触发动画；用 JS 动态加 class 时，如果 class 是“立刻加上去”的，浏览器可能合并渲染，导致动画丢帧。
立即学习“前端免费学习笔记（深入）”；
- 确保目标元素有明确宽高（尤其是伪元素或空
div），否则transform可能不可见 - 用 JS 触发动画时，建议加个
setTimeout(() => el.classList.add('loading'), 0)，强制分帧 - 不要依赖
transition模拟循环动画，它只能在状态切换时生效，无法替代animation
兼容性差的写法：哪些 @keyframes 属性老浏览器直接无视
IE 10+ 支持标准 @keyframes，但 IE 9 及更早完全不支持；Android 4.3 以下 WebView 对 transform 动画支持极差；Safari 9 对 animation-timing-function 的 cubic-bezier 支持有 bug。
真正安全的写法是保守的值组合：用 ease 或 linear，避免 steps() 做加载条（IE/旧安卓会卡死），别在关键帧里写 filter 或 clip-path。
- 旋转动画用
transform: rotate()+transform-origin，比margin位移兼容性好得多 - 颜色变化尽量用
background-color，别用color配opacity做淡入——部分 iOS Safari 会闪烁 - 需要 fallback 时，直接提供一个静态 .gif 替代，比写一堆前缀更可靠
怎么让加载动画和接口请求节奏对齐
动画本身不感知数据，所以“动起来”和“数据回来”完全是两件事。最容易出问题的是：请求还没发，动画先播完了；或者请求失败了，动画还转着。
核心逻辑得由 JS 控制启停，CSS 只负责定义“怎么动”。别把 animation 写死在类里，而是用 JS 切换开关类，比如 is-loading。
- 发起请求前加
el.classList.add('is-loading')，响应后立刻remove - 超时或报错时也要主动停掉动画，避免用户以为还在加载
- 如果用 React/Vue，注意组件卸载时清理定时器或 class，否则可能操作已销毁的 DOM
复杂点在于动画有延迟或循环次数限制，这时候 JS 得监听 animationend 事件做收尾——但注意：infinite 动画不会触发这个事件，得自己记次或用 setTimeout 匹配时长。
