javascript - 連続する x 軸の背景画像のスライド

Question

大きな画像の背景 css ルールを持つ div 要素があります。

画像を x 軸でスムーズにスライドさせたいのですが、軽量のプラグインやスニペットはありますか?

どんな提案でも大歓迎です！

Answer 1

Webkit のスタイルは次のとおりです: http://jsbin.com/uzifag/2/

background-position を画像の負の幅に移動していることに注意してください。反対方向にしたい場合は、正の幅が機能します。必要に応じてアニメーションの長さを変更できます。

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