Explain transition property of CSS3?

Transition allows you to smoothly update the property values. You specify the time period and the property to the changed. The property update will happen during the specified time period. It is specified as follow: transition: width 2s. This means that width will change to its new value in 2 seconds. For ex:

div {
 width: 10px;
 height: 20px
 transition: width 2s, height 4s;
}

div:hover {
 width: 20px;
 height: 40px;

 transition: width 2s, height 4s
}

In the above example, upon hover over div width will change from 10px to 20px within 2s. And height will change from 20px to 40px within 4s.



Timing:
 You can specify the transition timing function as linear, ease, ease-in, ease-out, ease-in-out for the effect to take place.

• Ease will make transition effect with a slow start then fast, then slow in the end. 
• Ease-in makes transition effect to remain at same speed from start to end. 
• Ease-out starts out the transition effect as slow then it moves at normal speed. 
• Ease-in-out starts out the transition as slow and ends it as slow. For ex:

div {
 transition-timing-function: ease;
}

Delay: 
Since transition is all about timing an effect on a specific element, we can delay our timing as well. It can be specified by transition-delay: 1s.

div {
 transition-delay: 2s;
 }