Animation-timing-function, step 4

Let’s take a look at one more possible class of animation-timing-function values — steps.

It allows you to set «steps» that your animation will follow. The syntax of steps is as follows:

animation-timing-function: steps(steps_number, direction);

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.

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.

Let’s take a look how it works using an example.