3. CSS3动画（Animation）核心：打造无限循环的加载旋转动画

好，咱们今天来聊聊 CSS3 动画的核心——@keyframes。说实话，我刚接触 CSS 动画那会儿，觉得这玩意儿挺玄乎的。不就是让元素动起来吗？后来才发现，这里面的门道还真不少。

我个人习惯把 @keyframes 理解成「动画的剧本」。你写好了剧本，浏览器这个「导演」才知道该怎么演。今天我们就用这个剧本，做一个最常见的加载旋转动画。

3.1 @keyframes：动画的灵魂

先看一个最简单的例子。我想让一个圆环转起来，怎么做？

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

你看，@keyframes 后面跟着动画的名字 spin，然后花括号里定义了动画的「关键帧」。0% 是起始状态，100% 是结束状态。说白了，就是告诉浏览器：从 0 度转到 360 度。

我在项目中遇到过一个问题：有人把 0% 和 100% 写反了，结果动画往反方向转。嗯，这种低级错误我也犯过，后来养成了习惯——先写 0%，再写 100%，顺序不乱。

3.2 animation-name：给动画起个名

剧本写好了，得告诉哪个元素来演。这时候 animation-name 就派上用场了。

.loader {
  animation-name: spin;
}

就这么简单。把 spin 这个名字赋给 .loader 元素。不过光起名还不够，动画还得有「时长」和「次数」。

3.3 animation-duration：控制节奏

你想想看，一个旋转动画转一圈需要多久？太快了看不清，太慢了又显得拖沓。我一般用 1 秒到 2 秒之间。

.loader {
  animation-name: spin;
  animation-duration: 1.5s;
}

1.5 秒转一圈，节奏刚刚好。为什么是 1.5 秒？其实没有标准答案。我在做项目时试过 0.5 秒，转得飞快，用户看着眼晕；试过 3 秒，又觉得像蜗牛爬。最后折中选了 1.5 秒，视觉上最舒服。

3.4 animation-iteration-count：无限循环

加载动画嘛，肯定要一直转下去，直到内容加载完成。所以次数得设成无限。

.loader {
  animation-name: spin;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

infinite 就是无限循环的意思。你也可以设成具体的数字，比如 3 表示转三圈就停。但加载动画嘛，你懂的，得一直转。

3.5 完整示例：一个漂亮的加载旋转动画

好了，我们把上面这些知识点串起来，做一个完整的加载动画。这次我用一个圆环加一个渐变背景，效果更酷一点。

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

.loader {
  width: 50px;
  height: 50px;
  border: 4px solid #e0e0e0;
  border-top-color: #3498db;
  border-radius: 50%;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

这里我加了一个 animation-timing-function: linear。为什么？因为旋转动画要匀速才好看。如果用默认的 ease，转起来会先快后慢，看着怪怪的。

你看这个圆环，灰色边框做底，蓝色边框做顶，旋转起来就像在「转圈圈」。这就是最常见的加载动画样式，很多网站都在用。

3.6 避坑指南：我踩过的那些坑

• 忘记写单位： animation-duration: 1.5 是不行的，必须写成 1.5s。我刚开始学的时候经常忘，后来养成了习惯——凡是时间相关的属性，都带上 s。
• transform 写错位置： 有人把 transform: rotate(360deg) 写在了 .loader 的样式里，而不是 @keyframes 里。这样动画不会生效。记住，@keyframes 里定义的是动画过程中的状态变化。
• 性能问题： 如果你让动画在大量元素上同时运行，可能会卡顿。我建议用 transform 和 opacity 做动画，这两个属性浏览器会单独用 GPU 加速，性能更好。

3.7 进阶：让动画更生动

如果你觉得单色旋转太单调，可以试试多段 @keyframes。比如让颜色也变化：

@keyframes spin-color {
  0% {
    transform: rotate(0deg);
    border-top-color: #3498db;
  }
  50% {
    transform: rotate(180deg);
    border-top-color: #e74c3c;
  }
  100% {
    transform: rotate(360deg);
    border-top-color: #3498db;
  }
}

这样转着转着，颜色还会变，视觉上更有层次感。我在做登录页的加载动画时用过这个技巧，用户反馈说「挺有意思的」。

好了，今天的内容就到这里。你可以在浏览器里试试这段代码，看看效果。下次我们聊聊 animation-delay 和 animation-direction，让动画的控制更精细。有什么问题，欢迎随时交流。