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

With that image, you can't. The CSS is doing what it's supposed to (repeating infinitely), but the image itself is not continuous. What you need is an image whose last frame is identical to its first, so that when the animation ends, it appears as if it never stopped.

You can achieve this effect by making an extra-long image and rotating the image along its axis, but this effect works better on some images than others. Something like this:

In any case, here is the result: http://jsfiddle.net/Tu95Y/751/

@-webkit-keyframes slide {
  from{
      background-position:1725px;
  }
  to{
      background-position:575px;
  }
}

#logo{
  width:575px;
  height:200px;
  background:url(http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png);
  -webkit-animation: slide 10s linear infinite;
}

Answer 2

I think something along the lines of "rotate" using a bigger image than you need might should create a similar effect.. see this page for an explanation and demo

it won't strictly be from left/right so it will depend on your actual image if it looks OK

Answer 3

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;