1 <p>Let’s take a look at one more possible class of animation-timing-function values - steps.</p>

2 <p>It allows you to set “steps” that your animation will follow. The syntax of steps is as follows:</p>

3 animation-timing-function: steps(steps_number, direction);<p>It’s all very simple: the number of steps is an integer denoting the number of steps that the animation will take to get to the end; the direction can assume a start or end value.</p>

4 <p>If we use start, the first step is made simultaneously with the start of the animation; if end is used, the last step will be the end of the animation. That is, start makes the stepped animation run slightly ahead and end makes it fall slightly behind.</p>

5 <p>Let’s take a look how it works using an example.</p>