CSS如何制作简单的加载转圈动画_使用keyframe与animation

林译川

2026-10-30 • 👁 0人浏览过

基础转圈动画需两步：先用@keyframes定义从rotate(0deg)到rotate(360deg)的关键帧，再用animation: spin 0.8s linear infinite绑定；避免触发布局属性、确保GPU加速、注意优先级与渲染条件。怎么用

@keyframes

写一个基础转圈动画核心就两步：定义旋转关键帧，再用

animation

绑定到元素上。别写成 0% → 100% 都设

transform: rotate(360deg)

，那样浏览器不会动——得从

rotate(0deg)

到

rotate(360deg)

才有变化。

@keyframes spin

必须带名字，且名字要和

animation-name

完全一致（区分大小写）推荐写

from

to

，语义清晰，也避免漏写百分比符号别在

@keyframes

里写

display

或

width

这类触发布局的属性，容易卡顿

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

animation

的四个常用参数怎么配才不翻车光写

animation: spin 1s

很容易转一半停住、方向反了、或者点一下才动一次。真正控制行为的是后面几个隐式参数。

animation-duration

（比如

1s

）必须设，否则默认是

0s

，等于没动

animation-iteration-count

不写就是

1

，要循环得显式写

infinite

animation-timing-function

推荐用

linear

，不然默认

ease

会让转圈“先快后慢”，看起来像卡顿

animation-direction

默认

normal

，如果写了

alternate

又没配

infinite

，第二轮就会反转然后停住

.loader {
  animation: spin 0.8s linear infinite;
}

为什么加了

animation

却不转？常见失效场景不是代码写错，而是 CSS 优先级、渲染条件或硬件加速没跟上。尤其在移动端或低配设备上，不触发 GPU 加速时，

transform

动画可能被降级为软件渲染，帧率掉到 10fps 以下，肉眼就“不动”。父容器设了

overflow: hidden

且子元素超出，可能裁掉动画区域（检查元素是否真被渲染出来）用了

position: static

的普通块级元素，但没设宽高或

border

content

，结果 DOM 存在但尺寸为 0 —— 转了个寂寞 Chrome 旧版对

transform

will-change

组合敏感，加

will-change: transform

可能反而卡死，不如直接加

transform: translateZ(0)

强制 GPU 加速纯 CSS 转圈，

border

法比

svg

法更轻量吗？看场景。如果只要一个简单圆圈，

border

border-radius: 50%

确实够用；但想调颜色渐变、控制某一段空缺（比如进度感）、或适配深色模式自动换色，

border

就硬编码死了。使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载立即学习 “ 前端免费学习笔记（深入） ”；

border

方案依赖

transparent

边框 + 实色边框模拟，

animation

无法单独驱动某条边，只能整圈转

svg

的

或

可以用

stroke-dasharray

做“擦除式”加载，视觉更现代，但多了一层 DOM 结构性能上差别不大，但

border

法在 Safari iOS 15 之前有闪烁 bug，

svg

更稳真正省事的点不在体积，而在维护性：改一圈颜色，

border-color

改一次；改一圈渐变，就得切到

svg

里调

。

相关文章