Discussion on: How to animate horizontal bars sequentially in CSS3?

Pretty cool!

There's also animation-delay, which is helpful for spacing out the timing of animations: developer.mozilla.org/en-US/docs/W...

Side note: one reason why I like preprocessors (my go to is Sass) is that necessarily repetitive CSS can be encapsulated in a for loop:

// note: using $factor1 and $factor2 for the multiplication factors to 
// determine the animation percentages
@for $i from 0 through 5 {
  @keyframes bar_animate_#{$i} {
    0%,
    #{$i * $factor1}% {
      transform: scaleX(0);
      transform-origin: left;
    }
    #{$i * $factor2}%,
    100% {
      transform: scaleX(1);
      transform-origin: left;
    }
  }
}

And similarly for the .bar_[i] classes.

One more thing, looks like the CSS in that last block is correct, you set all the animations to bar_animate_5. The Codepen is correct though.