CSS 如何循环多个关键帧定义的 CSS 动画

在本文中，我们将介绍如何使用 CSS 循环多个关键帧定义的动画。CSS 动画允许我们通过定义关键帧来控制元素的动画效果，而循环则在动画结束后重新开始，使动画可以无限循环。

阅读更多：CSS 教程

什么是关键帧动画？

关键帧动画是一种通过在不同的时间点定义元素样式来创建动画的技术。在 CSS 中，我们可以使用 @keyframes 来定义关键帧。关键帧是一个时间轴，我们可以在不同的百分比位置定义元素的样式，并在动画中逐渐更改这些样式。

下面是一个简单的例子，展示了如何使用关键帧动画移动一个元素：

@keyframes move {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(100px);
    }
    100% {
        transform: translateX(0);
    }
}

.element {
    animation: move 2s infinite;
}

在上面的例子中，我们定义了一个名为 move 的关键帧动画。关键帧动画从 0% 的位置开始，元素没有任何变化；然后，当动画进行到 50% 位置时，元素向右移动 100px；最后，在 100% 位置时，元素回到初始位置。

在 .element 的样式中，我们使用 animation 属性将 move 动画应用到元素上。2s 表示动画的持续时间为 2 秒，infinite 表示动画无限循环。

如何在动画中循环多个关键帧定义？

CSS 允许我们在关键帧动画中定义多个关键帧。当我们想要在动画中循环多个关键帧定义时，我们可以通过在关键帧的最后一个位置添加一个指向第一个关键帧的属性来实现。

下面是一个例子，展示了如何在动画中循环多个关键帧定义：

@keyframes loop {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
        transform: scale(1.2);
    }
    100% {
        background-color: green;
        transform: scale(1);
    }
    101% {
        background-color: red;
        transform: scale(1);
    }
}

.element {
    animation: loop 4s infinite;
}

在上面的例子中，我们定义了一个名为 loop 的关键帧动画。动画从 0% 的位置开始，背景颜色为红色；然后在 50% 的位置，背景颜色变为蓝色，并且元素被放大到 1.2 倍大小；最后在 100% 的位置，背景颜色变为绿色，并且将元素缩放回原始大小。然后，我们在 101% 的位置重新定义了第一个关键帧的样式，将背景颜色设为红色，并将元素的缩放样式设为原始大小。

在 .element 的样式中，我们将 loop 动画应用到元素上，并且动画持续时间为 4 秒，且无限循环。