×

Html & Html5

The World's best Software Development Study Portal

CSS3

Introduction to CSS


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