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: ...