Css Animation Sequence

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

Solution 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 9ssteps(2, end) infinite;
  box-shadow: 005px white
}

/* animation */@keyframes fade {
  66%,
  100% {
    background: gray;
    box-shadow: 00
  }
}

.red {
  animation-delay: -12s
}

.orange {
  animation-delay: -6s;
}

<divclass=trafficLights><bclass=red></b><bclass=orange></b><bclass=green></b></div>

here is a codepen to play with : https://codepen.io/gc-nomade/pen/YVWeQq

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