Статический фон должен быть динамическим

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