<!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>