To modify an element gradually from one style to another, either the CSS transition, flash, or JavaScript can be used. To create a CSS transition, two things must be specified, the CSS property to add an effect and the effect time duration. If the time duration of the effect is not specified, its default value will be 0, and thus the transition will have no effect. When the cursor is moved over an element, the transition effect is started. The original style is attained gradually, by moving the mouse cursor out of the element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: crimson;
-webkit-transition: height 5s;
transition: height 5s;
}
div:hover {
height: 400px;
}
</style>
</head>
<body>
<h1>Hover over the Square.</h1>
<div></div>
</body>
</html>
Explanation:
In the above example, we are displaying a single property transition effect. The transition effect is added to the height property for a time duration of 5 seconds. Hover the mouse over the element to see the effect.
CSS Multiple Transition Effect:
To add a transition effect on multiple CSS properties, the CSS multiple transition effect is used. The properties are separated with a comma in the code.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:10px;
margin-left:100px;
width: 100px;
height: 100px;
background: crimson;
text-align:center;
-webkit-transition: width 5s, height 5s, -webkit-transform 5s;
transition: width 5s, height 5s, transform 5s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
</head>
<body>
<h1>Hover over the Square.</h1>
<div></div>
</body>
</html>
Explanation:
In the above example, we are displaying multiple transition effects. The transition effect is added to the width, height, and transformation properties for a time duration of 5 seconds. Hover the mouse over the element to see the effect.