CSS3 animation - smooth infinite cycle

问题

I've made a small background animation where a div changes color over time. It works smoothly, but when it gets to 100% it jumps straight to 0% without any transition. I've searched on google and tried different ways of doing the animation, but I've been unable to get a fluid "restart" if the animation.

What am I missing?

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

回答1:

You just have to fix your frames in another way : make the from (0%) and to (100%) values the same:

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:

There is the animation-direction property, which could be set to alternate to have it run back and forth instead of jumping back to 0% again.

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

EDIT: zessx just posted a fiddle before removing it again. I just updated that with the alternate option. Works fine. fiddle

来源：https://stackoverflow.com/questions/19403002/css3-animation-smooth-infinite-cycle

标签

css3

css-animations