纯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;}}

效果如下：