#animation-timing-function

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

默认属性 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.