Animate background image back and forth

Question

I would like to animate my background image and repeat on x from left to right and from right to left when the position is at the end.

My code is:

@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 does not work, because when the background is on -100%, I get a restart on 0.

Answer 1

, 0, -100%, , . , . , -100% ( ), 0 ( ).

,

animation-direction alternate. 0 -100% , -100% 0 .

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

Hide result

: . , . , .

Answer 2

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