New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

#transition-timing-function

Defines how the values between the start and the end of the transition are calculated.

default transition-timing-function: ease;

The transition starts slowly, accelerates in the middle, and slows down at the end.

transition-timing-function: ease-in;

The transition starts slowly, and accelerates gradually until the end.

transition-timing-function: ease-out;

The transition starts quickly, and decelerates gradually until the end.

transition-timing-function: ease-in-out;

Like ease, but more pronounced.

The transition starts quickly, and decelerates gradually until the end.

transition-timing-function: linear;

The transition has a *constant speed.

transition-timing-function: step-start;

The transition jumps instantly to the final state.

transition-timing-function: step-end;

The transition stays at the initial state until the end, when it instantly jumps to the final state.

transition-timing-function: steps(4, end);

By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.