CSS3 animation - smooth infinite cycle

Question

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\'v

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

Answer 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