css3无缝滚动效果（CSS3 制作的图片滚动效果）

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<li id="slider">
<figure>
<img src="austin-fireworks.jpg" alt="css3无缝滚动效果（CSS3 制作的图片滚动效果）" border="0" />

@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; } 
li#slider { overflow: hidden; }
li#slider figure img { width: 20%; float: left; }
li#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 5s slidy infinite; 
}