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>

I can see your @keyframes red { with opening curly brace ({), but can't see your closing curly brace (}) for it. Could it be causing problems? — SimpleBeat
– SimpleBeat, Commented Apr 22, 2017 at 19:02
Genius!! Thank you. That was exactly the problem. So simple when I can see it now. Much appreciated. — Achill
– Achill, Commented Apr 23, 2017 at 18:35

G-Cyrillus · Accepted Answer · 2017-04-22 19:44:17Z

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

edited Apr 22, 2017 at 19:44

answered Apr 22, 2017 at 19:24

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Achill Over a year ago

Thank you for that. Its actually the next element I need to code into the problem so that I can sequence the "lights" in order. I'm going to save the code you gave me & then apply the principle of it to my own project.

vlk · Accepted Answer · 2017-04-22 19:12:54Z

0

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

answered Apr 22, 2017 at 19:12

vlk

1,4501 gold badge13 silver badges23 bronze badges

2 Comments

Achill Over a year ago

Thank you for that. Jquery is not something I've used yet so your first answer is what I'll be using along with the other responses to this. The webkit is something I need to familiarise myself more with for projects like this

vlk Over a year ago

You're welcome, prefixes are necessary to able some css property to be supported by all browser. you can check on this site shouldiprefix.com to know what prefix you should use for any css property.

Collectives™ on Stack Overflow

CSS Animation Sequence

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related