Easing

🏡 Home

Easing is a concept from 2d animation and it involves the acceleration and deceleration of how an object moves through space.

Linear Easing

This is effectively no easing at all. The element will move from one position to another with no deceleration or acceleration. It looks bad because nothing in nature moves like this.

transition-timing-function: linear;

Ease Out

ease-out will start fast and ease when it slows down.

transition-timing-function: ease-out;

Ease In

ease-in will start slow and speed up at the end.

transition-timing-function: ease-in;

Ease In & Out

ease-in-out starts slow, speeds up in the middle, then ends slow. This is the best general easing option, in my opinion.

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