New! My 44-page ebook "CSS in 44 minutes" is out! 😃
#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.