Defines how the values between the start and the end of the animation are calculated.
default
animation-timing-function: ease;
The animation starts slowly, accelerates in the middle, and slows down at the end.
animation-timing-function: ease-in;
The animation starts slowly, and accelerates gradually until the end.
animation-timing-function: ease-out;
The animation starts quickly, and decelerates gradually until the end.
animation-timing-function: ease-in-out;
Like ease, but more pronounced.
The animation starts quickly, and decelerates gradually until the end.
animation-timing-function: linear;
The animation has a *constant speed.
animation-timing-function: step-start;
The animation jumps instantly to the final state.
animation-timing-function: step-end;
The animation stays at the initial state until the end, when it instantly jumps to the final state.
animation-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.