如上示例，5张图片轮播，实现原理：

1、基本结构：ul宽度设置为500%，每个li宽度为20%，ul的left每次递减100%；

2、首先给ul指定一个动画，整个动画30秒，延迟3秒开始动画，无限循环：animation:banner 30s 3s infinite;

3、动画的原理：每张图片的间隔是20%的时间（6秒），预留了3%的时间给图片快速滚动。

<!-- 这是主要的html结构 -->
<div class="banner">
 <ul>
    <li><div style="background-color:#E8DEAB;">假装是一张图片</div></li>
   <li><div style="background-color:#D0D793;">假装是一张图片</div></li>
   <li><div style="background-color:#B9C283;">假装是一张图片</div></li>
   <li><div style="background-color:#A0A27A;">假装是一张图片</div></li>
   <li><div style="background-color:#79744E;">假装是一张图片</div></li>
 </ul>
</div>

/*这是CSS样式*/
.banner{
 width:100%;
 margin:0 auto;
  overflow: hidden;
}
.banner ul{
 position:relative;
  width:500%;
 left:0;
 animation:banner 30s 3s infinite;
}
.banner ul li{
  width:20%;
  float:left;
}
@keyframes banner{
  10%{/*第一张图*/
    left:0%;
  }

 13%{/*第二张图*/
    left:-100%;
 }
 30%{
    left:-100%;
 }

 33%{/*第三张图*/
    left:-200%;
 }
 50%{
    left:-200%;
 }

 53%{/*第四张图*/
    left:-300%;
 }
 70%{
    left:-300%;
 }

 73%{/*第五张图*/
    left:-400%;
 }
 90%{
    left:-400%;
 }

 93%{
    left:0%;
  }
}