CSS Tip

How to correctly use steps() with animations

You want to create a discrete animation using steps() but you struggle with its value, right? You never know how many steps it requires and it never works as expected!

In most cases, adding an extra value will fix your issue.

/* Don't ❌ */
.element {
  animation: anime 3s steps(3);
}
/* Do  ✅ */
.element {
  animation: anime 3s steps(3,jump-none);
}

By default, steps() uses jump-end which is not very intuitive. The behavior you are looking for is the one of jump-none

Illustrating the steps() function

Here is a demo with some common examples (see the comments in the CSS code)

See the Pen Using steps(N,jump-none) by Temani Afif (@t_afif) on CodePen.

More CSS Tips