CSS Animation Sequence - html

Question

I've been coding a very simple "Traffic Light" program and have run into a problem where it doesn't run after the first #keyframes section completes correctly. From my own research online I'm guessing that I would need a transition(?) so that when the first #keyframes is complete, the next one would be run. However my inexperience with this I'm not sure if its whats required here. Essentially is there a "trigger" I'm missing or is it just something obvious I've left out?
Please excuse the rough code. Its does work as I described above
body {
background-color: #4d4d00
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
#red {
position: absolute;
left: 50px;
text-align: center;
padding: 30px;
background-color: #e60000;
margin: 10px auto;
width: 50px;
height: 50px;
border-radius: 200px;
animation: red 4s 1s 3 linear;
}
#amber {
position: absolute;
left: 1px;
text-align: center;
padding: 30px;
background-color: #ff3300;
margin: 10px auto;
width: 50px;
height: 50px;
border-radius: 200px;
animation: amber 4s 1s 3 linear;
}
#green {
position: absolute;
left: 1px;
text-align: center;
padding: 30px;
background-color: #009933;
margin: 10px auto;
width: 50px;
height: 50px;
border-radius: 200px;
animation: green 4s 1s 3 linear;
}
#keyframes red {
from {
background-color: #e60000;
}
to {
background-color: #000000;
}
#keyframes amber {
from {
background-color: #ff3300;
}
to {
background-color: #000000;
}
#keyframes green {
from {
background-color: #009933;
}
to {
background-color: #000000;
}
}
<div class="container">
<div class="row">
<div id="red">
<br>
<br>
<div id="amber">
<br>
<br>
</div>
</div>
</div>
</div>

Answer 1

you may use animation-delay.
here is a short/minimal code example.
.red {
background: red;
}
.orange {
background: orange
}
.green {
background: lime;
}
/* layout */
div {
display: flex;
height: 150px;
width: 50px;
flex-direction: column;
border-radius: 1em;
background: #555;
margin: 1em;
}
b {
flex: 1;
margin: 5px;
border-radius: 50%;
animation: fade 9s steps(2, end) infinite;
box-shadow: 0 0 5px white
}
/* animation */
#keyframes fade {
66%,
100% {
background: gray;
box-shadow: 0 0
}
}
.red {
animation-delay: -12s
}
.orange {
animation-delay: -6s;
}
<div class=trafficLights>
<b class=red></b>
<b class=orange></b>
<b class=green></b>
</div>
here is a codepen to play with : https://codepen.io/gc-nomade/pen/YVWeQq

Answer 2

You have two way to do this
1) is use animation-delay and set an higher delay to elements you would like to animate after.
animation-delay: 1s;
-webkit-animation-delay:1s;
2) trigger an element.addClass("animatedClass"); with the end of a css animation using animationonend jquery function.
$(".animatedElement").one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) {
$(".animatedElement").addClass("newAnimatedClass");
});