CSS steps() Function

The steps() function allows you to break an animation into a specific number of discrete frames.

Most CSS easing functions (like ease, linear, or cubic-bezier()) are designed to create smooth transitions by calculating hundreds of intermediate values between the start and end of an animation. The steps() function does the exact opposite.

Instead of a smooth glide, steps() divides the animation into equal segments and jumps instantly from one state to the next. If you've ever wanted to create a frame-by-frame sprite animation, a ticking second hand on a clock, or a retro typing effect, this is the function you need.

Here's a side-by-side comparison. Both boxes take exactly 3 seconds to cross the screen, but the second box uses steps(5) to break the journey into five distinct jumps:

.runner {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background-color: #007bff;
    
    /* Both animations take exactly 3 seconds */
    animation: runAcross 3s infinite;
  }

/* Smooth linear movement */
  .smooth-linear {
    background-color: #dc3545;
    animation-timing-function: linear;
  }

/* Stepped movement (5 distinct jumps) */
  .stepped {
    background-color: #28a745;
    animation-timing-function: steps(5);
  }

@keyframes runAcross {
    0% {
      transform: translateX(0);
    }
    100% {
      /* Move 300px to the right */
      transform: translateX(300px);
    }
  }
</style>

View Output Full Screen Preview

Controlling the Jump Position

The steps() function accepts an optional second parameter that tells the browser when the jump should happen during each step interval. If you don't provide one, it defaults to jump-end.

jump-end (or just end): The animation holds its starting state for the duration of the step, and jumps at the very end of the interval.
jump-start (or just start): The animation jumps immediately as soon as the step begins, and holds that new state until the next step.
jump-none: Both the 0% and 100% marks are held, effectively adding an extra frame so that the animation rests on both the very beginning and the very end states.
jump-both: The animation jumps immediately at the start and skips the final resting state, pausing only on the intermediate frames.

A Real-World Example: The Typing Effect

One of the most popular tricks using the steps() function is creating a typewriter effect entirely in CSS. By animating the width of a text container from 0 to its full length, and setting the number of steps to match the exact number of characters in the text, you get a perfect letter-by-letter reveal.

Here's how it looks in action:

.typewriter-text {
    color: #00ff00;
    font-family: monospace;
    font-size: 1.5em;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid #00ff00;
    
    /* 
      The text "Access granted." has 15 characters.
      We use steps(16) to add one extra "blank" step at the end. 
      This ensures the final period stays visible for a moment 
      before the 'alternate' animation reverses!
    */
    animation: 
      typing 3s steps(16) infinite alternate,
      blink 0.8s steps(1, end) infinite;
  }

@keyframes typing {
    from { width: 0; }
    /* 16ch allows room for that extra holding step */
    to { width: 16ch; }
  }

@keyframes blink {
    from, to { border-color: transparent; }
    50% { border-color: #00ff00; }
  }
</style>

<div class="typewriter-container">
  <div class="typewriter-text">Access granted.</div>
</div>

View Output Full Screen Preview

Official Syntax

The official syntax of the steps() function is as follows:

Where <step-position> is defined as:

Possible Values

As indicated in the official syntax, the steps() function accepts the following values:

integer: A positive integer representing the number of intervals (or frames) the animation should be broken into.
step-position: An optional keyword indicating when the jump occurs within the interval. It can be jump-start, jump-end, jump-none, jump-both, start, or end. If omitted, it defaults to jump-end (which behaves the same as end).

CSS Specifications

The steps() function is defined in CSS Easing Functions Level 1 (W3C Candidate Recommendation)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.