原生CSS写轮播图

html代码

<div class="banner">
		<a id="bnimg1" href="/1.jpg" target="_blank"></a>
		<a id="bnimg2" href="/2.jpg"  target="_blank"></a>
		<a id="bnimg3" href="/3.jpg"  target="_blank"></a>
	</div>

css代码

body{
	margin:0;
}
.banner{
	height:604px;
	width:404px;
	background:green;
}
.banner a{
	height:600px;
	background-size:cover;
	position:absolute;
}
#bnimg1{
	background-image:url("./jpg/1.jpg");
	-webkit-animation-name:first;
}
#bnimg2{
	background-image:url("./jpg/2.jpg");
	-webkit-animation-name:second;
}
#bnimg3{
	background-image:url("./jpg/3.jpg");
	-webkit-animation-name:third;
}
#bnimg1,#bnimg2,#bnimg3{
	-webkit-animation-duration:9s;
	-webkit-animation-delay:2s;
	/*-webkit-animation-timing-function:linear;*/
	-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes first
{
	0% {left:0px;width:400px;}
	33% {left:0px;width:0px;}
	66% {left:0px;width:0px;}
	66.1% {left:400px;width:0px;}
	100% {left:0px;width:400px;}
}
@-webkit-keyframes second
{
	0% {left:400px;width:0px;}
	33% {left:0px;width:400px;}
	66% {left:0px;width:0px;}
	100% {left:0px;width:0px;}
}
@-webkit-keyframes third
{
	0% {left:400px;width:0px;}
	33% {left:400px;width:0px;}
	66% {left:0px;width:400px;}
	100% {left:0px;width:0px;}
}