Question

我制作了一个小背景动画，其中div随着时间的推移会改变颜色。它工作顺利，但当它达到100％时，它会直接跳到0％而没有任何转换。我在google上搜索并尝试了不同的动画制作方式，但是如果动画的话，我一直无法获得流畅的“重启”。

我错过了什么？

-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}
            }

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}
}

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选项更新了它。工作良好。 fiddle

CSS3动画 - 平滑无限循环

2 个答案: