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.