Steps Easing

Quick implementation

/* Basic usage */
.element {
  animation: move 2s steps(4, end) infinite;
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

/* For typewriter effect */
.typewriter {
  animation: type 3s steps(20) forwards;
}

@keyframes type {
  from { width: 0; }
  to { width: 100%; }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

Create a CSS animation using the steps() timing function.
Requirements:
1. Use steps(N, end) for discrete frame-by-frame movement.
2. Create a keyframe animation that translates an element from 0% to 100%.
3. Include a typewriter effect variant using width transition.
4. Ensure accessibility by respecting prefers-reduced-motion.
5. Use modern CSS variables for configuration.
Output: Provide the CSS code with comments explaining the steps() parameters.

Why this matters in 2026

The steps() timing function remains essential for retro-style animations and sprite sheet playback in 2026, offering precise control over animation frames without JavaScript overhead. Modern browsers continue to support this function, making it a reliable choice for performance-critical animations where frame-by-frame control is required. Developers increasingly use it for typewriter effects and clock animations that demand discrete state changes rather than smooth interpolation.

The logic

The steps() function divides the animation timeline into a specified number of equal intervals, creating a staircase effect where the element jumps between states rather than moving smoothly. The second parameter determines whether the first or last step occurs at the start or end of the animation, with "end" being the most common choice for movement animations. This creates a natural frame-by-frame feel that mimics traditional animation techniques while maintaining the performance benefits of CSS animations.

Accessibility & performance

Always include a prefers-reduced-motion media query to disable or simplify animations for users who have indicated they prefer reduced motion, ensuring your animations don't cause discomfort or distraction. The steps() function is highly performant as it leverages the compositor thread, making it suitable for complex animations that would otherwise require JavaScript. However, be mindful that too many steps can create a choppy appearance, so test your animation timing to ensure it feels natural for the intended effect.