×

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>

<html>

<head>

<style>

#demo {

      height: 100px;

      width: 200px;

      background:green;

      transition:2s;

}

#demo:hover {

      width: 500px;

}

</style>

</head>

<body>

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

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

</body>

</html>


Output of the Program



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