steps() Timing Function
The steps(n) timing function jumps between n evenly-spaced states instead of interpolating. Perfect for sprite sheet animations and typewriter effects.
CSS
Intermediate
5 min read
Step-Based Animations with steps()
Example
/* Typewriter effect */
@keyframes type {
from { width: 0; }
to { width: 20ch; }
}
.typewriter {
overflow: hidden;
white-space: nowrap;
width: 0;
animation: type 2s steps(20) forwards;
border-right: 2px solid;
}
/* Sprite sheet: 8 frames */
@keyframes sprite {
from { background-position: 0 0; }
to { background-position: -800px 0; }
}
.character { animation: sprite 0.8s steps(8) infinite; } Pro Tip
Use steps(n, start) or steps(n, end) to control whether steps snap at the beginning or end of each interval.