Stepped animation
Also called steps() easing, step animation, or frame-by-frame animation
An animation that jumps through a set number of frames instead of moving smoothly, made with the CSS steps() timing function.
import { motion, steps, useReducedMotion } from 'motion/react';
const FRAMES = 8;
const FRAME_WIDTH = 64; // px, so the sheet is 512px wide
export function WalkingSprite() {
const reduceMotion = useReducedMotion();
return (
<motion.div
role='img'
aria-label='A character walking'
// Reduced motion leaves the first frame showing.
animate={
reduceMotion
? undefined
: { backgroundPositionX: [0, -FRAMES * FRAME_WIDTH] }
}
// steps(8) holds each frame, then jumps to the next, like a flip book.
transition={{ duration: 0.8, ease: steps(FRAMES), repeat: Infinity }}
className='size-16 bg-[url(/sprites/walk.png)] [image-rendering:pixelated]'
/>
);
}Animate the character sprite sheet, 8 frames that are each 64px wide, by moving its background-position from 0 to -512px over 800ms with steps(8), looping forever. Show only the first frame when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Stepped animation?
A stepped animation splits its duration into equal chunks and holds each value until the next chunk begins, like the second hand of a clock ticking. In CSS you get it by using steps(n) as the timing function, for example animation: tick 60s steps(60) infinite.
It fits places where smooth motion would look wrong: sprite sheets that flip through hand-drawn frames, typewriter effects that reveal one character at a time, ticking clocks and countdowns, and pixel-art styles.
steps() also takes a jump position. The default, jump-end (also written end), holds the starting value through the first step, while jump-start (or start) jumps right away. For a typewriter effect, match the step count to the number of characters so each step reveals exactly one.
Often confused with
- Frame rate (FPS)
- Frame rate is how many frames the browser draws each second. A stepped animation shows only a few distinct values on purpose, even at a high frame rate.
Related terms
All termsTypewriter effect
A text animation that reveals a line one character at a time, as if someone were typing it, usually with a blinking caret at the end.
Linear easing
Easing that moves at one constant speed from start to finish, with no speeding up or slowing down, drawn as a straight line on a graph.
Keyframes
Snapshots that define how an element looks at set points in an animation. The browser fills in the motion between them.
Frame rate (FPS)
The number of frames a screen draws each second; around 60 fps, motion looks smooth, and at lower rates it starts to look choppy.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.