最简可用旋转加载动画需两步：先用@keyframes定义0%→100%的rotate(0deg)→rotate(360deg)，再用animation: spin 0.8s linear infinite应用，注意设transform-origin、display:inline-block及避免触发布局。
直接用 @keyframes 配合 animation 就能实现绝大多数 CSS 加载动画，但关键在于帧定义是否合理、动画时长与迭代是否匹配真实加载场景，否则容易卡顿或“假加载”。
怎么写一个最简可用的旋转加载动画
核心是两步：先用 @keyframes 定义旋转动作，再用 animation 应用到元素上。常见错误是只写 transform: rotate(360deg) 却忘了加 transform-origin，导致旋转中心偏移。
-
@keyframes spin必须从0%写到100%，且至少包含起止状态（哪怕只是rotate(0deg)→rotate(360deg)） - 应用时推荐写全
animation: spin 1s linear infinite，不建议只写animation-name和animation-duration，漏掉animation-iteration-count: infinite就只会转一圈 - 对
inline元素（如<span></span>）加动画前，先设display: inline-block或display: block，否则transform可能不生效
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #eee;
border-top-color: #007bff;
animation: spin 0.8s ease-in-out infinite;
}
为什么动画看起来卡顿或跳帧
本质是浏览器渲染管线没被友好对待。CSS 动画只有操作 transform 和 opacity 才能走合成层（compositor），一旦动了 width、height、left、top 或 background-color，就会频繁触发重排（reflow）和重绘（repaint）。
- 旋转类动画务必用
transform: rotate()，别用left/top模拟 - 如果要用颜色变化（比如 loading 文字渐变），只改
color或opacity，别碰background-color（它会触发重绘） - 在高 DPI 屏幕或低端设备上，
animation-duration小于300ms容易感知卡顿，建议不低于400ms - 避免在
@keyframes中写大量中间帧（如 0%→25%→50%→75%→100%），浏览器插值压力大；两帧足够时就别堆
如何让动画随加载状态启停
不能靠 JS 频繁增删 class 触发动画开关——这会导致样式重计算。更稳的方式是用 animation-play-state 控制暂停/运行，它开销极小。
- 初始状态设
animation-play-state: paused，加载开始时改为running - 不要用
display: none隐藏 loading 元素，它会彻底卸载动画；改用visibility: hidden或opacity: 0 - 如果用 React/Vue，把
animation-play-state绑定到 state，比用className切换更轻量 - 注意：Safari 对
animation-play-state的支持从 iOS 13+ 才稳定，老版本需降级为 class 切换
.loading {
animation: spin 0.8s linear infinite;
animation-play-state: paused;
}
.loading.active {
animation-play-state: running;
}
兼容性与性能容易被忽略的点
不是所有 @keyframes 写法都跨浏览器安全。比如 Firefox 旧版不支持 from/to 关键字，而某些 Android WebView 对 will-change: transform 的处理反而拖慢动画。
- 始终用百分比写
@keyframes（0%,100%），别依赖from/to - 需要硬件加速时，加
transform: translateZ(0)比will-change更兼容，且无副作用 - IE10+ 支持
@keyframes，但必须带-ms-前缀（@-ms-keyframes），现代项目若已放弃 IE，可忽略 - 动画元素如果父容器有
overflow: hidden，又用了transform，部分 Chrome 版本会出现裁剪异常，加transform-style: flat或临时去 overflow 可缓解
真正难的不是写出动画，而是让动画在各种网络延迟、设备性能、浏览器版本下都“看起来像在等”，而不是“卡住了”或“转太快像没加载”。帧节奏、视觉反馈密度、以及和 JS 加载逻辑的时序对齐，才是容易被跳过的细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
