Traffic light

/* HTML Coding */


<div class="trafficlight">
<span class="light1"></span>
 <span class="light2"></span>
<span class="light3"></span>
</div>

/* CSS Code */


.traffic
{
    background:#333;
    height:300px;
    width:150px;
    border-radius:30px;
    margin:3em auto;
    position:relative;
    padding-top:12px;
    border:2px #666 solid;
    top: -1px;
    left: 3px;
}
.traffic span
{
    margin:20px auto;
    display:block;
    width:65px;
    height:65px;
    border:4px solid #777;
    border-radius:50px;
    box-shadow:5px 10px 20px rgba(0,0,0,.5),inset 0px 10px 10px 0px;
}

.light1
{
 
    background:#300;
     animation:redlight 25s infinite;
}

.light2
{
    background:#430;
     animation:orangelight 25s infinite;
}
.light3
{
    background:#030;
    animation:greenlight 25s infinite;
}

@keyframes greenlight
{
0%{background: #030;}
5%{background:#030;}
45%{background:#13b420;}
50%{background: #030;}
100%{background: #030;}
}

@keyframes orangelight
{
0%   {background:#430;}
45%  {background:#430 ;}
55%  {background:#fc0;}
60%  {background:#430;}
100% {background: #430;}
}
@keyframes redlight
{
0%   {background:#300;}
55%  {background:#300 ;}
60%  {background:#f00;}
95%  {background:#f00;}
100% {background: #300;}
}



.light1, .light2, .light3
{
    animation-duration:4s;

}