連續的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;} 
}