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.

Baseline Status: Achieved Widely Available on Mar 16, 2023 (Cross-browser Newly Available since Sep 16, 2020).

Desktop Browser Engine Support

Google Chrome

77

Supported

Mozilla Firefox

65

Supported

Apple Safari

14

Supported

Microsoft Edge

79

Supported

Mobile Browser Engine Support

Chrome Android

77

Firefox Android

65

Safari iOS

14

Specifications and References

Specification ↗ Feature XML ↗

MDN Browser Compat Data Keys:

css.types.easing-function.steps ↗ css.types.easing-function.steps.jump ↗