SOURCE

const TIME_FOR_RED = 2*1000;
const TIME_FOR_GREEN = 2*1000;
const TIME_FOR_YELLOW = 1*1000;

class TrafficLight {
  async boot() {
    while(true) {
      openRedLight();
      await waitForINTERVAL(TIME_FOR_RED);
      openGreenLight();
      await waitForINTERVAL(TIME_FOR_GREEN);
      openYellowLight();
      await waitForINTERVAL(TIME_FOR_YELLOW);
    }
  }
}

async function waitForINTERVAL(interval) {
  return new Promise((resolve, reject)=> {
  	let start = null;
    function run(time) {
      if (!start) start = time;
      if (time - start > interval) {
				resolve();
      } else {
        requestAnimationFrame(run);
      }
    }
    run();  
  });
}

function openRedLight() {
  document.querySelector('.red').classList.add('active');
  document.querySelector('.yellow').classList.remove('active');
}
function openYellowLight() {
  document.querySelector('.yellow').classList.add('active');
  document.querySelector('.green').classList.remove('active');
}
function openGreenLight() {
  document.querySelector('.green').classList.add('active');
  document.querySelector('.red').classList.remove('active');
}

var trafficLight = new TrafficLight();
trafficLight.boot();

<div class="traffic-light">
	<div class="light red active"></div>
  <div class="light yellow"></div>
  <div class="light green"></div>
</div>

.traffic-light {
  width: 50px;
  display: flex;
  flex-wrap: wrap;
}

.light {
  flex: 1 1 50px;
  height: 50px;
  border-radius: 100%;
  background-color: #ddd;
}

.red.active {
  background-color: red;
}

.yellow.active {
  background-color: yellow;
}
.green.active {
  background-color: green;
}