Animate background image's position back and forth - css

Question

I'd like to animate my background image and repeat on x from left to right and right to left when the position is on the end.
My code :
#keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -100% 0; }
}
body.rotonde{
background-image: url(../pages/bg.jpg);
background-repeat: repeat-x;
animation: animatedBackground 15s linear infinite;
overflow: hidden;
}
My code doesn't work because when the background is on -100%, I get a restart on 0.

Answer 1

The reason why you get a restart on 0 as soon as it reaches -100% is because of how animations work in general. Once they complete a loop, they generally go back to their original state and restart the next loop. So, as soon as it reaches -100% (the end state), it resets the position to 0 (the start state).
from left to right and right to left when the position is on the end
For the above, you can use the animation-direction as alternate. This would make the animation animate the background position from 0 to -100% for odd numbered iterations and then from -100% to 0 for even numbered iterations.
#keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -100% 0; }
}
body{
background-image: url(http://placehold.it/100x100);
background-repeat: repeat-x;
animation: animatedBackground 15s linear alternate infinite;
overflow: hidden;
}
Note: In the above snippet, it goes from right to left in the odd iterations and left to right in even ones. If you need it the other way around, just reverse the keyframes. My intent was just to give a demo of the alternating motion.

Answer 2

Try this
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
width: 560px;
height: 400px;
background-image: url(../pages/bg.jpg);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
}

Answer 3

The animation runs to the end and the default is to start again from the beginning.
The "animation-direction" property handles that. Here are some of the options:
normal -Default value. The animation is played as normal (forwards)
reverse -The animation is played in reverse direction (backwards)
alternate -The animation is played forwards first, then backwards
alternate-reverse -The animation is played backwards first, then forwards
initial -Sets this property to its default value.
inherit -Inherits this property from its parent element.
I prefer to use alternate, which runs to the end and then back again in reverse.
Try:
#keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -100% 0; }
}
body.rotonde{
background-image: url(../pages/bg.jpg);
background-repeat: repeat-x;
animation: animatedBackground 15s linear infinite;
overflow: hidden;
**animation-direction: alternate**;
}