CSS transition-timing-function property

Description

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.

Syntax

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

Property values

easeDefault

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

transition-timing-function: ease;

ease-in

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

transition-timing-function: ease-in;

ease-out

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

transition-timing-function: ease-out;

ease-in-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

From web4college, the free CSS digger

#CSS digger
Was this article helpful?

 
We are observing the transition-timing-function.
▾
×

Ctrl+D