纯CSS3 制作交通信号灯红绿灯动画效果

纯CSS3 制作交通信号灯红绿灯动画效果

HTML：

	<div class="light">
		<div class="red"></div>
		<div class="yellow"></div>
		<div class="green"></div>
	</div>

CSS:

	* {
		box-sizing: border-box;
	}
	.light {
		width: 103px;
		height: 303px;
		background-color: #000;
	}
	.red {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		/*定义名称为red的动画，匀速三秒完成动画*/
		animation: red 6s linear infinite; 
	}
	

	.yellow {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		animation: yellow 6s linear infinite; 
	}
	.green {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		animation: green 6s linear infinite; 
	}
	@keyframes red {
		0% {background-color: red;}
		15% {background-color: red;}
		35% {background-color: red;}
		36% {background-color: #fff;}
		100% {background-color: #fff;}

	}
	@keyframes yellow {
		0% {background-color: #fff;}
		37% {background-color: #fff;}
		37.1% {background-color: yellow;}
		72% {background-color: yellow;}
		73% {background-color: #fff;}
		100% {background-color: #fff;}
	}
	@keyframes green {
		0% {background-color: #fff;}
		35% {background-color: #fff;}
		73% {background-color: #fff;}
		73.1% {background-color: green;}
		74% {background-color: green;}
		100% {background-color: green;}
	}

效果如下：