How to apply transition on element in CSS?

The transition feature in CSS3 allows you to change the property value of an element to occur smoothly over a specified period. In normal CSS scenario, when the property value of an element changes, the resulting value instantly updated. For example, the background color of a button changes its color when a mouse hovers it and it happens instantly.