webkit css3 animation loop

Question

I made a background to animate from left to right. Everything works fine but when background-image reaches right, the animation starts over again.

How can i mak

Answer 1

We did like the idea of the same frame at the begnning and end, but it was much easier just to duplicate it 2 times and user a longer animation. This will run for 8 minutes.

@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -4000px 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -4000px 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -4000px 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -4000px 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -4000px 0; }
}

Then on your element:

animation: animatedBackground 480s linear;
-moz-animation: animatedBackground 480s linear;
-webkit-animation: animatedBackground 480s linear;
-ms-animation: animatedBackground 480s linear;
-o-animation: animatedBackground 480s linear;