スタティックバックグラウンドはダイナミックにする必要があります

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