连续的x轴背景图像幻灯片

Question

我有一个带有大图片背景css规则的div元素。

现在我想顺畅地在x轴上滑动图像，有没有轻量级的插件或代码片段？

如有任何建议，欢迎光临！

Answer 1

以下是webkit的样式：http://jsbin.com/uzifag/2/

请注意，我正在将背景位置移动到图像的负宽度。如果你希望它是相反的方向，正宽度就行了。您可以根据自己的需要播放动画的持续时间。

body{
  background:url(http://placekitten.com/1920/1080/) repeat-x center left;
  -webkit-animation: slidex 20s linear infinite;
     -moz-animation: slidex 20s linear infinite;
      -ms-animation: slidex 20s linear infinite;
       -o-animation: slidex 20s linear infinite;
          animation: slidex 20s linear infinite;
}

@-webkit-keyframes slidex
{
  FROM{background-position:0 center;}
  TO{background-position:-1920px center;}
}
@-moz-keyframes slidex
{
  FROM{background-position:0 center;}
  TO{background-position:-1920px center;}
}
@-ms-keyframes slidex
{
  FROM{background-position:0 center;}
  TO{background-position:-1920px center;}
}
@-o-keyframes slidex
{
  FROM{background-position:0 center;}
  TO{background-position:-1920px center;}
}
@keyframes slidex
{
  FROM{background-position:0 center;}
  TO{background-position:-1920px center;}
}