13

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

2 回答 2

13

您只需要以另一种方式修复框架：使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}
}

于 2013-10-16T12:55:56.887 回答
7

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

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

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

于 2013-10-16T12:56:23.607 回答