CSS 带关键帧的动画

示例

对于多阶段CSS动画，您可以创建CSS @keyframes。关键帧允许您定义多个动画点，称为关键帧，以定义更复杂的动画。

---

基本范例

在此示例中，我们将制作一个基本的背景动画，该动画在所有颜色之间循环。

@keyframes rainbow-background {
         0%     { background-color: #ff0000; }
     8.333%     { background-color: #ff8000; }
    16.667%     { background-color: #ffff00; }
    25.000%     { background-color: #80ff00; }
    33.333%     { background-color: #00ff00; }
    41.667%     { background-color: #00ff80; }
    50.000%     { background-color: #00ffff; }
    58.333%     { background-color: #0080ff; }
    66.667%     { background-color: #0000ff; }
    75.000%     { background-color: #8000ff; }
    83.333%     { background-color: #ff00ff; }
    91.667%     { background-color: #ff0080; }
    100.00%     { background-color: #ff0000; }
}

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

查看结果

这里有几件事要注意。首先，实际@keyframes语法。

@keyframes rainbow-background{

这会将动画的名称设置为rainbow-background。

0%     { background-color: #ff0000; }

这是动画中关键帧的定义。第一部分，0%在这种情况下，定义了动画期间关键帧的位置。这0%意味着从一开始就占动画总时间的0％。

动画将在关键帧之间自动过渡。因此，通过将下一个背景色设置为8.333%，动画将在这些关键帧之间平稳地花费8.333％的时间进行过渡。

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

此代码将动画附加到具有.RainbowBackground该类的所有元素上。

实际的animation属性具有以下参数。

• animation-name：动画的名称。在这种情况下，rainbow-background

• animation-duration：动画需要多长时间，在这种情况下为5秒。

• animation-iteration-count（可选）：动画循环播放的次数。在这种情况下，动画将无限期继续。默认情况下，动画将播放一次。

• animation-delay（可选）：指定动画开始之前要等待的时间。默认值为0秒，并且可以取负值。例如，-2s将动画开始2秒钟进入循环。

• animation-timing-function（可选）：指定动画的速度曲线。默认为ease，动画开始缓慢，变慢并且结束缓慢。

在此特定示例中，0%和100%关键帧均指定{ background-color: #ff0000; }。只要两个或多个关键帧共享一个状态，就可以在一条语句中指定它们。在这种情况下，可以将这两行0%和两100%行替换为以下一行：

0%, 100%     { background-color: #ff0000; }

---

跨浏览器兼容性

对于基于WebKit的旧版浏览器，您需要在@keyframes声明和animation属性上都使用供应商前缀，如下所示：

@-webkit-keyframes{}

-webkit-animation: ...