CSS transition property

Property values

transition-property

widthDefault

transition starts its execution as soon as it starts.

transition-property: width;

transition-duration

+ve value (seconds)Default

It determnines the duration of transition. transition occurs instantly for 0s.

transition-duration: 0s;

+ve value (seconds)

transition-duration also accepts fractional values. Change in the property value occurs within 2.5s.

transition-duration: 2.5s;

+ve value (milliseconds)

time in milliseconds may also be used as the value. 2000ms means 2s.

transition-duration: 2000ms;

transition-timing-function

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;

transition-delay

+ve value (seconds)Default

transition-delay accepts value in seconds. 0s means the transition starts its execution as soon as it starts.

transition-delay: 0s;

+ve value (seconds)

transition-delay also accepts fractional values. 2.5s means the transition starts execution after 2.5 seconds when it is applied.

transition-delay: 2.5s;

+ve value (milliseconds)

value in milliseconds may also be used. 2000ms means 2s. Wait for 2000ms to see the execution of transition.

transition-delay: 2000ms;

-ve value (seconds)

It starts execution partway through its life cycle. If the transition-duration is 3s and transition-delay is -2s, it shows a part of cycle that remains after subtracting transition-delay from transition-duration (1s).

transition-delay: -2s;