This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

steps

Summary

A timing function that specifies a progression of discrete intervals over the course of a transition or animation keyframe.

The function’s mandatory first argument specifies the number of discrete, equal steps in the progression. An optional second argument accepts keywords start or end (the default), specifying whether the change should take place at the beginning or end of each new step.

Examples

Apply an un-smoothed ratchet effect to any font-size transitions:

p {
    transition: font-size 1s;
    transition-timing-function: steps(5);
}

Related specifications

CSS Transitions
Working Draft