Semáforo - Voltar

function vermelho(){
    var lampada = document.getElementById('vermelho');
    lampada.style.backgroundColor = "#F00";
    lampada.style.boxShadow = "0px 0px 50px 30px #F00";
    setTimeout(function(){
        lampada.style.backgroundColor = "rgba(0, 0, 0, 0)";
        lampada.style.boxShadow = "0px 0px 0px 0px #F00";
        verde();
    }, 3000);
}


function amarelo(){
    var lampada = document.getElementById('amarelo');
    lampada.style.backgroundColor = "#FF0";
    lampada.style.boxShadow = "0px 0px 50px 30px #FF0";
    setTimeout(function(){
        lampada.style.backgroundColor = "rgba(0, 0, 0, 0)";
        lampada.style.boxShadow = "0px 0px 0px 0px #FF0";
        vermelho();
    }, 3000);
}


function verde(){
    var lampada = document.getElementById('verde');
    lampada.style.backgroundColor = "#0F0";
    lampada.style.boxShadow = "0px 0px 50px 30px #0F0";
    setTimeout(function(){
        lampada.style.backgroundColor = "rgba(0, 0, 0, 0)";
        lampada.style.boxShadow = "0px 0px 0px 0px #F00";
        amarelo();
    }, 3000);
}


verde();

#semaforo{
    width: 182px;
    height: 500px;
    position: relative;
    margin: auto;
    background-image: url('../img/semaforo.png');
}
.lampada{
    width: 46px;
    height: 46px;
    background-color: rgba(0, 0, 0, 0);
    margin-top: 14px;
    margin-left: 68px;
    border-radius: 50px;
}

#vermelho{
    position: absolute;
    margin-top: 13px;
}

#amarelo{
    position: absolute;
    margin-top: 90px;
}

#verde{
    position: absolute;
    margin-top: 167px;
}