animation - webkit css3 动画循环

Question

我制作了一个从左到右动画的背景。一切正常，但当背景图像到达右侧时，动画重新开始。

我怎样才能让它连续运行，让它看起来总是从左到右行进(没有间断)？

这是仅在 webkit 浏览器中有效的 fiddle 链接:
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

有了那张图片，你做不到。 CSS 正在做它应该做的事情(无限重复)，但图像本身不是连续的。您需要的是最后一帧与第一帧相同的图像，这样当动画结束时，它看起来就好像从未停止过一样。

您可以通过制作超长图像并沿其轴旋转图像来实现此效果，但此效果在某些图像上比在其他图像上效果更好。像这样:

无论如何，结果如下: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;
}