What is the purpose of Transitions property in CSS3?

Transitions in CSS3 allows you to change property values from one value to another, over a given duration.

For creating a transitions effect, you need to specify two things: first thing is the CSS property that you want to add an effect to and second this is duration of the effect.

In CSS3, the transition property is a shorthand property for the four transition properties: transition-property, transition-duration, transition-timing-function, and transition-delay.

The transition-delay property specifies when the transition effect will start.

The transition-duration property specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.

The transition-property property specifies the name of the CSS property the transition effect is for.

The transition-timing-function property specifies the speed curve of the transition effect.

Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.