CSS 循环一个动画

在本文中，我们将介绍如何使用CSS循环一个动画。CSS动画是通过使用@keyframe规则定义一系列关键帧，并通过将这些关键帧应用于元素来创建动画效果。CSS循环动画可以重复播放动画，让元素在页面上连续运动。

阅读更多：CSS 教程

使用animation属性创建动画

要创建一个循环动画，首先我们需要使用animation属性。这个属性定义了动画的各种参数，包括动画名称、持续时间、动画类型等。下面是一个使用animation属性创建循环动画的示例：

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

.element {
  animation: rotate 2s linear infinite;
}

在上面的代码中，我们定义了一个名为”rotate”的动画，其中定义了两个关键帧：0%和100%。在0%关键帧，元素的transform属性为rotate(0deg)，表示元素开始时不做任何旋转；在100%关键帧，元素的transform属性为rotate(360deg)，表示元素在动画结束时完成一整圈的旋转。然后，我们将这个动画应用于名为”element”的元素，并指定了动画的持续时间2s、动画类型linear和循环次数无限（infinite）。

使用@keyframe规则创建关键帧

在上面的示例中，我们使用了@keyframe规则来定义动画的关键帧。关键帧是指动画中的每一个时间点的状态。在关键帧中，我们可以定义元素在不同时间点的各种样式。通过在关键帧中定义不同的样式，我们可以实现元素在动画中的渐变、移动、旋转等效果。

下面是@keyframe规则的语法示例：

@keyframes animation_name {
  keyframe_selector {
    /* 定义样式 */
  }
  /* 可以定义更多的关键帧 */
}

在上面的示例中，animation_name表示动画的名称，可以自由命名；keyframe_selector表示关键帧的选择器，可以是一个具体的百分比，也可以是关键字，例如0%、25%、50%等，还可以使用关键字from（等同于0%）和to（等同于100%）。

示例：循环改变颜色的动画

为了更好地理解如何循环一个动画，让我们来看一个示例。在这个示例中，我们将创建一个循环改变颜色的动画。

首先，我们先创建一个div元素，并为其添加一个名为”color-animation”的类：

<div class="color-animation"></div>

然后，在CSS中，我们定义这个类的样式以及动画效果：

@keyframes changeColor {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: blue;
  }
}

.color-animation {
  width: 100px;
  height: 100px;
  animation: changeColor 3s linear infinite;
}

在上面的代码中，我们定义了一个名为”changeColor”的动画，其中定义了三个关键帧：0%、50%和100%。在0%关键帧，div元素的背景颜色为红色；在50%关键帧，背景颜色变为绿色；在100%关键帧，背景颜色变为蓝色。然后，我们将这个动画应用于名为”color-animation”的元素，并指定了动画的持续时间3s、动画类型linear和循环次数无限（infinite）。

现在，让我们来预览一下这个动画的效果。当你运行这段代码时，你会看到div元素的背景颜色会不断地在红、绿、蓝之间循环变化。