带关键帧的动画

对于多阶段 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-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: ...