靜態背景需要動態

Question

我希望我的背景像滑塊一樣移動，因爲現在我的背景沒有移動。這是我試圖把滑塊的簡碼進行編碼的代碼，但它不起作用。

<div class="SFOI clearfix" style="background: url('') no-repeat top center; background-size: cover; "> 

我想要的背景中移動：

Answer 1

這可以使用此

HTML

<div id="slider"> 
<figure> 
<img src="https://i.ytimg.com/vi/KXdUNp_9oHs/hqdefault.jpg" alt> 
<img src="http://zoedouceur.z.o.pic.centerblog.net/11042612345122694.jpg" alt> 
<img src="http://www.lanu.de/media/thumbnails/867/9c9ca240b73a8f5cf7cbbd8b16473867/df2a2872.jpg" alt> 
<img src="http://strapya.typepad.com/photos/uncategorized/waterfall.jpg" alt> 
<img src="https://naturesimage.files.wordpress.com/2013/06/binnaburra.jpg" alt> 
</figure> 
</div> 

CSS

@keyframes slidy { 
    0% { left: 0%; } 
    20% { left: 0%; } 
    25% { left: -100%; } 
    45% { left: -100%; } 
    50% { left: -200%; } 
    70% { left: -200%; } 
    75% { left: -300%; } 
    95% { left: -300%; } 
    100% { left: -400%; } 
    } 

body { margin: 0; } 
div#slider { overflow: hidden; } 
div#slider figure img { width: 20%; float: left; } 
div#slider figure { 
    position: relative; 
    width: 500%; 
    margin: 0; 
    left: 0; 
    text-align: left; 
    font-size: 0; 
    animation: 30s slidy infinite; 
    } 

查看運行Fiddle