Web4College

CSS transition-timing-function property

src

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;
Try it

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;
Try it

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;
Try it

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;
Try it

Applicable to

It applies to all elements