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 make it to run continuously so that it appears it is traveling from left to right always (no breaks)?

Here is the fiddle link works only in webkit browsers:
http://jsfiddle.net/Tu95Y/750/

@-webkit-keyframes slide {
    from{
        background:left;
    }
    to{
        background:right;
    }
}

#logo{
    width:300px;
    height:200px;
    background:url(http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg);
    -webkit-animation: slide 5s linear infinite;
}

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