静态背景需要动态

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