CSS animation-timing-function property

Property values

easeDefault

The speed of the animation is constant over its duration. It represents normal behavior over the animation-duration.

animation-timing-function: ease;

ease-in

The speed is slow at the start of animation i.e. It represents smooth behavior at the start only.

animation-timing-function: ease-in;

ease-out

The speed is fast at the end of animation i.e. The animation is smooth at the end.

animation-timing-function: ease-out;

ease-in-out

The speed of the animation is slow at the start and end of animation-duration as compared to intermediate time. It represents smooth behavior at the start and end of the animation.

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