Animation starts immediately:
<div id="container">
  <div class="red">1</div>
  <div class="yellow">2</div>
  <div class="green">3</div>
</div>

#container{
  height:100px;
  border:1px solid black;
}
#container div{
  display:inline-block;
  width:30%;
  text-align:center;
  font-size:24px;
  line-height:100px;
  animation-name: traffic;
  animation-duration:1s;
  animation-fill-mode: forwards;
}
.red{
  background-color:red;
  height:0px;
}
.yellow{
  background-color:yellow;
  height:0px;
  animation-delay:1s;
}
.green{
  background-color:green;
  height:0px;
  animation-delay:2s;
}

@keyframes traffic {
  from {height: 0px; }
  to {height: 100px; }
}