通过这个形象，你不能。该CSS是做什么它应该（重复无限），但图像本身是不连续的。你需要的是一个图像的最后一帧等同于它的第一个，这样，当动画结束，它看起来好像它从来没有停止过。

您可以通过一个超长的图像和图像沿其轴线旋转达到这种效果，但这种影响效果会更好一些图像比其他人。事情是这样的：

在任何情况下，这里是结果： http://jsfiddle.net/Tu95Y/751/

  @  -  WebKit的关键帧幻灯片{
  从{
      背景位置：1725px;
  }
  至{
      背景位置：575px;
  }
}#logo {
  宽度：575px;
  高度：200像素;
  背景：网址（http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png）;
  -webkit-动画：幻灯片10S线性无穷;
}
 

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

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