如上示例，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%;
	}
}