transition-timing-function, step 4

Another possible transition-timing-function value class is steps.

They allow you to assign the “steps” that the transition will unfold across. The steps syntax is as follows:

transition-timing-function: steps(number_of_steps, direction);

Everything is simple here: number_of_steps is an integer designating the number of steps over which the transition will be performed; and direction can take either the value start or end.

Given a start, the first step is carried out at the same time as the start of the transition, and in the case of end, the last step will be carried out together with the completion of the transition.

By the way, the transition can be described in shorthand notation using the transition property. The transition parameters are simply listed separated by spaces: property, duration, form, and delay:

transition: width 1s ease-in 2s;

In this example, a transition is applied to the width of the element, and it will last for one second following the ease-in form, and there will be a delay of 2 seconds before it starts.

We also converted the description of the transition for the .square square in this task to shorthand form.