CSS3 动画 - 平滑无限循环答案

【问题标题】：CSS3 animation - smooth infinite cycleCSS3 动画 - 平滑无限循环
【发布时间】：2013-10-24 13:01:58
【问题描述】：

我制作了一个小的背景动画，其中 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}
            }

【问题讨论】：

标签： css css-animations

【解决方案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}
}

【讨论】：

【解决方案2】：

有animation-direction 属性，可以将其设置为alternate 让它来回运行，而不是再次跳回0%。

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

编辑：zessx 刚刚发布了一个小提琴，然后再次将其删除。我刚刚用alternate 选项更新了它。工作正常。 fiddle

【讨论】：

这个方法效果很好，虽然fiddle link不行。