纯CSS实现轮播小Demo

Html部分：

<div class="fa">
			<div class="fa-one">
				<div class="son-a" style="background-color: red;">0</div>
				<div class="son-a" style="background-color: orange;">1</div>
				<div class="son-a" style="background-color: yellow;">2</div>
				<div class="son-a" style="background-color: green;">3</div>
				<div class="son-a" style="background-color: blue;">4</div>
			</div>
		</div>

CSS部分：

	*{
			padding: 0;
			margin: 0;
		}
			.fa{	
				width: 1200px;
				height:600px;
				margin: 0 auto;
				overflow: hidden;
			}
			.fa-one{
				width: 500%;
				height: 100%;
				position: relative;
				animation: aa 10s infinite ease-in-out;
			}
			.son-a{				
				width: 20%;
				height: 100%;
				text-align: center;
				line-height: 600px;
				font-size: 100px;
				float: left;
			}
			#aa{
				width: 100px;
				height: 60px;
				margin: 0 auto;
			}
			@keyframes aa{
				0%{
					left: -0px;
				}
				20%{
					left: -1200px;
				}
				40%{
					left: -2400px;
				}
				60%{
					left: -3600px;
				}
				80%{
					left: -4800px;
				}
				100%{
					left:-0px;
				}
			}