CSS3动画-平滑无限循环

Question

我制作了一个小背景动画，其中一个div会随着时间改变颜色。它可以平稳地运行，但当它达到100%时，它会立即跳回0%，没有任何过渡效果。我在谷歌上搜索并尝试了不同的动画方式，但我无法获得流畅的“重新启动”动画。我错过了什么？

-webkit-animation: pulsate 20s infinite;
animation: pulsate 20s infinite;
-moz-animation: pulsate 20s infinite;

            @-webkit-keyframes pulsate {
                0% {background: @black}
                25% {background: @red}
                50% {background: @blue}
                75% {background: @orange}
                100% {background: @green}
            }


            @keyframes pulsate {
                0% {background: @black}
                25% {background: @red}
                50% {background: @blue}
                75% {background: @orange}
                100% {background: @green}
            }

            @-moz-keyframes pulsate {
                0% {background: @black}
                25% {background: @red}
                50% {background: @blue}
                75% {background: @orange}
                100% {background: @green}
            }

- Morten Hjort

Answer 1

你只需要以另一种方式固定框架：将from（0％）和to（100％）的值设为相同：

html, body {   
    width: 100%; height: 100%;
    margin: 0;
    padding: 0;
}
body {
    -webkit-animation: pulsate 20s linear infinite;
    -moz-animation: pulsate 20s linear infinite;
    animation: pulsate 20s linear infinite;
}

@-webkit-keyframes pulsate {
    0% {background: black}
    20% {background: red}
    40% {background: blue}
    60% {background: orange}
    80% {background: green}
    100% {background: black}
}
@-moz-keyframes pulsate {
    0% {background: black}
    20% {background: red}
    40% {background: blue}
    60% {background: orange}
    80% {background: green}
    100% {background: black}
}
@keyframes pulsate {
    0% {background: black}
    20% {background: red}
    40% {background: blue}
    60% {background: orange}
    80% {background: green}
    100% {background: black}
}

- zessx

Answer 2

有一个animation-direction属性，可以设置为alternate，让它来回运行而不是跳回到0%。

-webkit-animation: pulsate 20s infinite alternate;
animation: pulsate 20s infinite alternate;
-moz-animation: pulsate 20s infinite alternate;

编辑：zessx刚刚发布了一个代码片段，之后又将其删除。我刚刚更新了这个代码片段，加入了alternate选项。现在它可以正常工作了。 代码片段

- MildlySerious

---

这个方法很有效，尽管fiddle链接无法使用。 - l'L'l