CSS Tip

Sequential animations with N elements

Using modern CSS, you can create a sequential animation that involves an unknown number of items with a simple code. No need for complex keyframes, delays, or magic numbers. A clever combination of the sibling-index()/sibling-count() functions and linear() will do the job!

CSS-only sequential animations

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <!-- as many elements as you want -->
</div>
.container > * {
  --d: .5s; /* animation duration */
  
  --_s: calc(100%*(sibling-index() - 1)/sibling-count());
  --_e: calc(100%*(sibling-index())/sibling-count());
  animation: x calc(var(--d)*sibling-count()) infinite linear(0,0 var(--_s),1,0 var(--_e),0);
}
@keyframes x {
  to {
    scale: .8;
  }
}

⚠️ Limited support (Chrome only for now) ⚠️

See the Pen Sequential Animations by Temani Afif (@t_afif) on CodePen.

More CSS Tips