CSS如何制作旋转加载动画？@keyframes关键帧

答案是利用@keyframes和transform: rotate()创建旋转动画，通过border差异形成动态缺口，配合animation实现持续旋转；优化可采用linear时间函数、GPU加速（如translateZ或will-change）以提升流畅度；自定义可通过调整animation-duration、颜色、尺寸等属性实现；项目中推荐使用CSS变量、组件化封装和工具类提高复用性，并添加role="status"、aria-live="polite"及sr-only文本增强可访问性。

在CSS里制作旋转加载动画，最核心的思路就是利用

@keyframes

规则配合

transform: rotate()

属性，让一个带有部分边框的圆形元素持续旋转起来。这就像我们小时候玩陀螺，给它一个初始的力，它就能自顾自地转起来，直到力尽为止。而CSS动画，就是我们给这个陀螺注入的“永恒的力”。

解决方案

要实现一个经典的旋转加载动画，我们通常会创建一个简单的HTML元素，比如一个

div

，然后用CSS赋予它圆形的外观和旋转的生命。

首先，HTML部分可以非常简洁：

<div class="loader"></div>

接着是CSS，这是魔法发生的地方：

立即学习“前端免费学习笔记（深入）”；

.loader {     width: 50px; /* 宽度和高度相同，确保是正方形 */     height: 50px;     border: 4px solid #f3f3f3; /* 浅灰色背景边框 */     border-top: 4px solid #3498db; /* 蓝色旋转部分 */     border-radius: 50%; /* 变成圆形 */     animation: spin 1s linear infinite; /* 应用动画：动画名、持续时间、速度曲线、重复次数 */ }  @keyframes spin {     0% {         transform: rotate(0deg); /* 动画开始时旋转0度 */     }     100% {         transform: rotate(360deg); /* 动画结束时旋转360度，完成一圈 */     } }

这段代码的核心在于

.loader

的

border

和

border-top

属性，它们共同创造了一个“缺口”的视觉效果，然后

@keyframes spin

则负责让这个缺口围绕中心点不断旋转。

animation: spin 1s linear infinite;

这一行是关键，它把

@keyframes spin

定义的动画规则应用到

.loader

元素上，让它在1秒内完成一圈（

linear

表示匀速），并无限循环下去。

为什么我的加载动画看起来不平滑或有锯齿感？

嗯，这确实是个常见的问题，尤其是在一些性能不那么充裕的设备上。我个人在开发中也遇到过，明明代码看起来没问题，但动画就是有些“卡顿”或“抖动”。这里面有几个可能的原因，或者说，我们可以尝试的优化点。

首先，也是最直接的，就是

animation-timing-function

。如果你没有明确设置它，或者设置成了

ease

、

ease-in-out

这类非线性的曲线，那么动画在开始和结束时会有加速或减速的效果，这对于一个需要持续匀速旋转的加载动画来说，会显得很不自然，甚至产生视觉上的停顿感。所以，务必使用

linear

，确保动画从头到尾都是匀速的。

.loader {     /* ...其他样式 */     animation: spin 1s linear infinite; /* 确保是 linear */ }

其次，这可能涉及到浏览器的渲染优化。有时候，浏览器会选择在CPU上进行动画计算，而不是利用更高效的GPU。为了强制浏览器使用GPU进行硬件加速，我们可以在动画元素上添加一些“魔法”属性。最常用的就是

transform: translateZ(0);

或者

will-change: transform;

。

.loader {     /* ...其他样式 */     transform: translateZ(0); /* 强制GPU加速 */     /* 或者 */     will-change: transform; /* 告诉浏览器这个属性会频繁变化，提前优化 */ }

transform: translateZ(0);

虽然看起来什么都没做（把元素在Z轴上移动了0个像素），但它能触发某些浏览器的层合成优化，将元素提升到独立的渲染层，从而利用GPU。

will-change

则更明确地告诉浏览器，某个属性即将发生变化，让浏览器可以提前进行优化准备。当然，

will-change

不要滥用，因为它也会消耗额外的内存。

最后，还有一些细节问题，比如元素的尺寸和边框宽度。虽然不常见，但在某些极端情况下，非整数的尺寸或边框宽度可能会导致像素渲染上的微小偏差，从而在高速旋转时产生视觉上的“抖动”。我一般会尽量使用偶数像素值，但这并非铁律，更多是经验之谈。

如何自定义旋转加载动画的样式和速度？

自定义这些动画其实非常直观，就像我们调整一台机器的旋钮一样。核心在于对CSS属性值的把控。

调整速度： 最直接的就是改变

animation-duration

的值。这个值决定了动画完成一圈所需的时间。

• 想要快一点？把

  1s

  改成

  0.5s

  ：

  animation: spin 0.5s linear infinite;
• 想要慢一点？改成

  2s

  ：

  animation: spin 2s linear infinite;

调整颜色： 修改

border

和

border-top

的颜色值。

• border: 4px solid #e0e0e0;

  可以让背景边框变成更浅的灰色。

• border-top: 4px solid #ff5722;

  则可以让旋转的部分变成鲜艳的橙色。

调整尺寸和粗细：

• width

  和

  height

  决定了加载动画的整体大小。比如，改成

  width: 80px; height: 80px;

  就会得到一个更大的加载圈。

• border-width

  则控制了边框的粗细。把

  4px

  改成

  8px

  ，你的加载圈就会显得更“粗壮”。

改变旋转方向： 如果你想让它逆时针旋转，只需要在

@keyframes

中调整

transform: rotate()

的值：

@keyframes spin-reverse {     0% { transform: rotate(0deg); }     100% { transform: rotate(-360deg); } /* 从0度到负360度 */ }

然后把动画名应用到元素上：

animation: spin-reverse 1s linear infinite;

更复杂的样式： 如果想实现更复杂的加载动画，比如多层旋转、不同颜色的分段，那可能就需要用到伪元素（

::before

和

::after

）或者嵌套多个

div

，每个

div

有自己的动画和样式。比如，你可以有一个外层大圈，里面套一个小圈，让它们以不同的速度或方向旋转，形成更丰富的视觉效果。但这会增加HTML结构和CSS的复杂性，需要根据具体需求权衡。

在实际项目中，如何更好地管理和复用这些CSS加载动画？

在真实的项目里，我们很少会为每个加载动画都手写一套独立的CSS。效率和可维护性是关键。我的经验是，可以从以下几个方面入手。

CSS变量（Custom Properties）： 这是现代CSS里非常强大的一个特性。你可以把加载动画的颜色、尺寸、速度等参数定义成CSS变量，这样在需要调整时，只需要修改变量的值，所有使用这些变量的加载动画都会同步更新。这比在多个地方修改硬编码的值要方便太多了。

:root {     --loader-size: 50px;     --loader-border-width: 4px;     --loader-background-color: #f3f3f3;     --loader-active-color: #3498db;     --loader-speed: 1s; }  .loader {     width: var(--loader-size);     height: var(--loader-size);     border: var(--loader-border-width) solid var(--loader-background-color);     border-top: var(--loader-border-width) solid var(--loader-active-color);     border-radius: 50%;     animation: spin var(--loader-speed) linear infinite; }

然后，如果你想在某个地方使用一个不同颜色的加载器，可以直接在父元素或加载器自身上覆盖变量：

.loader--red {     --loader-active-color: #e74c3c; /* 覆盖为红色 */ }

组件化思维和工具类： 在前端框架（如React、Vue、Angular）中，加载动画通常会被封装成一个独立的组件。这个组件内部包含HTML和CSS，对外暴露props（属性）来控制大小、颜色、速度等。这样，在任何需要加载动画的地方，直接引用这个组件即可。

即使不使用框架，也可以创建一系列CSS工具类：

• .loader

  ：基础样式

• .loader--large

  ：放大尺寸

• .loader--small

  ：缩小尺寸

• .loader--primary

  ：使用主色调

• .loader--secondary

  ：使用次色调

• .loader--fast

  ：加快速度

通过组合这些类，可以快速构建出不同风格的加载动画。

可访问性（Accessibility）： 这是一个经常被忽视但非常重要的点。屏幕阅读器用户可能无法“看到”加载动画。为了提供更好的用户体验，我们应该为加载动画添加可访问性属性。

• role="status"

  ：表示这是一个状态信息，屏幕阅读器会知道这里有内容在更新。

• aria-live="polite"

  ：告诉屏幕阅读器在内容更新时礼貌地通知用户，而不是打断他们。

• 隐藏的文本：为了更清晰地描述，可以添加一个视觉上隐藏但对屏幕阅读器可见的文本，比如“内容正在加载中…”

     内容正在加载中... 

.sr-only

通常是一个CSS类，用于将元素在视觉上隐藏，但保留给屏幕阅读器：

.sr-only {     position: absolute;     width: 1px;     height: 1px;     padding: 0;     margin: -1px;     overflow: hidden;     clip: rect(0, 0, 0, 0);     white-space: nowrap;     border-width: 0; }

通过这些方法，不仅能让你的CSS加载动画更易于开发和维护，也能让它们在各种场景下表现得更专业、更友好。