CSS Animation Sequence

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");
});