steps() easing
The steps() CSS easing function divides an animation or transition into equidistant intervals, jumping from value to value. The step-start and step-end keyword values are presets with a single interval.
Overview
The steps() CSS easing function divides an animation or transition into equidistant intervals, jumping from value to value. The step-start and step-end keyword values are presets with a single interval.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 8 | 12 | 4 | 5.1 | 18 | 5 | |
| CSS type | ||||||
steps.jump `jump-` keywords for `steps()` | 77 | 79 | 65 | 14 | 77 | 14 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.sprite {
animation: walk 1s steps(8) infinite;
}
.typewriter {
animation: reveal 2s steps(20, end);
}Live demo
Use cases
Using steps() easing
The steps() CSS easing function divides an animation or transition into equidistant intervals, jumping from value to value. The step-start and step-end keyword values are presets with a single interval.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features