Html & Html5

The World's best Software Development Study Portal

CSS Transition

Those effects we add in our elements to change the styling from one phase or more phase , without using flash or Javascript. For that the transition property we use.

For creating the Css transition property two things are mandatory part

  • Css property in which we want to add the effect
  • Time duration for the effect.

Let's understand this by the following program:-

<!DOCTYPE html>




#demo {

      height: 100px;

      width: 200px;




#demo:hover {


      width: 500px;





<div id="demo"> </div>

<h5> Move cursor around the box </h5>



Output of the Program

Move cursor around the box

So in this way can give transition or easiness to our elements.

CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute