**I stumbled upon this online code snippet where a timer is controlled in CSS. I'm trying to figure out how to control it with JavaScript, but all my attempts have failed so far. Is there anyone who can help me solve this issue? What I'm attempting to do is trigger a JavaScript function with a button click, which will then run the lights based on a predefined timer sequence (i.e., red for 5 seconds, orange for 3 seconds, and green for 10 seconds). I've tried using setTimeout and setInterval but haven't been successful. The desired functionality is that when the button is clicked, the set of lights should run according to the specified timing.
html {
background: linear-gradient(#08f, #fff);
padding: 40px;
width: 170px;
height: 100%;
margin: 0 auto;
}
.protector {
background: transparent;
width: 180px;
height: 0;
position: absolute;
top: 20px;
left: -35px;
border-right: solid 30px transparent;
border-left: solid 30px transparent;
border-top: solid 90px #111;
border-radius: 10px;
z-index: -1;
}
.protector:nth-child(2) {
top: 140px;
}
.protector:nth-child(3) {
top: 260px;
}
.trafficlight {
background: #222;
background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
width: 170px;
height: 400px;
border-radius: 10px;
position: relative;
border: solid 5px #333;
}
.trafficlight:before {
background: #222;
background-image: radial-gradient(#444, #000);
content: "";
width: 170px;
height: 150px;
margin: 0 auto;
position: absolute;
top: -30px;
margin-left: 0px;
border-radius: 50%;
z-index: -1;
}
.trafficlight:after {
background: #222;
background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);
content: "";
width: 75px;
height: 800px;
margin-left: 50px;
position: absolute;
top: 150px;
z-index: -1;
}
.red {
background: red;
background-image: radial-gradient(brown, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 35px;
animation: 15s red infinite;
box-shadow: 0 0 20px #111 inset, 0 0 10px red;
}
.yellow {
background: yellow;
background-image: radial-gradient(orange, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 145px;
left: 35px;
animation: 13s yellow infinite;
box-shadow: 0 0 20px #111 inset, 0 0 10px yellow;
}
.green {
background: green;
background-image: radial-gradient(lime, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 270px;
left: 35px;
box-shadow: 0 0 20px #111 inset, 0 0 10px lime;
animation: 13s green infinite;
}
@keyframes red {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
40% {
opacity: 1;
}
60% {
opacity: .1;
}
80% {
opacity: .1;
}
100% {
opacity: .1;
}
}
@keyframes yellow {
0% {
opacity: .1;
}
20% {
opacity: .1;
}
40% {
opacity: 1;
}
50% {
opacity: .1;
}
60% {
opacity: .1;
}
80% {
opacity: .1;
}
100% {
opacity: .1;
}
}
@keyframes green {
0% {
opacity: .1;
}
20% {
opacity: .1;
}
40% {
opacity: .1;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
85% {
opacity: .1;
}
90% {
opacity: 1;
}
95% {
opacity: .1;
}
100% {
opacity: 1;
}
}<div class="trafficlight">
<div class="protector"></div>
<div class="protector"></div>
<div class="protector"></div>
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>**