The “form” of the transition, transition-timing-function

Another property that affects the transition is transition-timing-function. This property is similar to the animation-timing-function property, which is covered in the chapter on animations. The transition-timing-function property defines the speed and acceleration with which the properties change during the transition.

In the previous examples, the transitions all occurred at the same tempo. We change the duration and delay of the transition, but we did not change the “form” of it, By default, this form corresponds to the first graph, from which you can see that the transition begins slowly, starts to accelerate, and then slows down again before the end.

This is how the ease value of the transition-timing-function property behaves.

ease
linear

To make the transition uniform without any acceleration or deceleration, use the linear value. The “form” of the linear transition is shown in the second graph.