webkit css3动画循环

Question

我做了一个从左到右动画的背景.一切正常,但当背景图像到达时,动画重新开始.

如何让它连续运行,使其看起来始终从左向右行进(没有休息)？

这里的小提琴链接仅适用于webkit浏览器: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;
}