<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
margin: 0 auto;
width: 80px;
border-radius: 40px;
border: 3px solid #333;
background-color: #333;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
}
.light{
width: 50px;
height: 50px;
border-radius: 50%;
margin: 10px 0;
background: #000;
opacity: .1;
}
.red{
background: #ff0000;
animation: 12s red infinite;
}
.yellow{
background: #ffff00;
animation: 12s yellow infinite;
}
.green{
background: #008000;
animation: 12s green infinite;
}
@keyframes red{
0%{opacity: 1;}
30%{opacity: 1;}
33%{opacity: .1;}
}
@keyframes yellow{
0%{opacity: .1;}
33%{opacity: .1;}
36%{opacity: 1;}
63%{opacity: 1;}
66%{opacity: .1;}
}
@keyframes green{
0%{opacity: .1;}
66%{opacity: .1;}
69%{opacity: 1;}
97%{opacity: 1;}
100%{opacity: .1;}
}
</style>
</head>
<body>
<div class="box">
<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>
</div>
</body>
</html>
