How to use transition property in css?

Transition property is use to give effect to HTML Element when it will be in Hover or in focus mode.

Below is the example , which shows the use of Transition in div

Make a class like below.

div {transition: background-color 0.5s ease;

background-color: red;


div:hover {

background-color: green;


This is a Live Demo of Transition Property

This is a Transition Property Live Demo

About the Author