CSS transition-timing-function property


CSS transition-timing-function allows a transition to change speed over time. It decides how the properties are calculated during transition i.e. properties may change swifly or slowly.


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

Property values


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

transition-timing-function: ease;


The speed is slow at the start of transition i.e. It represents somooth behavior at the start only.

transition-timing-function: ease-in;


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

transition-timing-function: ease-out;


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

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

Applicable to

It applies to all elements

#CSS digger
Was this article helpful?

We are observing the transition-timing-function.