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

           

以上是 CSS 带关键帧的动画 的全部内容, 来源链接: utcz.com/z/347058.html

回到顶部