back

Animation-Timing-Function

This is used to specify how an animation will progress over one cycle.
It has several options:
(1) Ease, this is default, the animation starts slowly, speeds up, and then ends slowly.
(2) Ease-in, the animation starts slowly.
(3) Ease-out, the animation ends slowly.
(4) Ease-in-out, the animation starts slowly and ends slowly.
(5) Linear, the animation maintains the same speed throughout.
For maximum browser support, you should use the following prefixes:
(1) animation-timing-function:
(2) -webkit-animation-timing-function:

Example