<div></div>
div{
  position:relative;
  height:100px;
  width:100px;
}
div::after{
  background-color:white;
  content:" ";
  display: inline-block;
  border-radius:50%;
  border:1px solid black;
  font-size:24px;
  line-height:100px;
  width:100%;
  height:100%;
  text-align:center;
  animation-name:traffic;
  animation-duration:3s;
  animation-fill-mode: forwards;
}

@keyframes traffic {
  25% {
    background-color: red; 
    content:"Ready";
  }
  50%{
    background-color: yellow;
    content:"Steady";
  } 
  70%{
    background-color: green;
    content:"GO!!!";
  }
  75%{
    background-color: white;
    content:"GO!!!";
  }
  80%{
    background-color: green;
    content:"GO!!!";
  }
  85%{
    background-color: white;
    content:"GO!!!";
  }
  90%{
    background-color: green;
    content:"GO!!!";
  }
  95%{
    background-color: white;
    content:"GO!!!";
  }
  100%{
    background-color: green;
    content:"GO!!!";
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.