In CSS3 using transition, we can change the style of an element from one to another. without using flash or javascript.
CSS3 Transition Includes
For transition, we can specify the following two things.
- Property of CSS for effects
- Duration of effects
CSS
div {
width: 300px;
height:200px;
display:block;
background-color:#1FA67A;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 400px;
}In above code we have created a div block with height, width & transition(i.e: transition: width 2s). so on hover of that div width will increase based on transition width and duration of 2sec.
Multiple Transition Changes
To add transition effects for more than one CSS property, separate the properties with a comma.
CSS
div {
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s,-webkit-transform 2s; /* For Safari 3.1 to 6.0 */
}Transition With different properties
We can add different transition attribute like property, duration, timing-function, and delay.
CSS
div {
/* Standard syntax */
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
}Full HTML & CSS Code
HTML & CSS
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height:200px;
display:block;
background-color:#1FA67A;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div>Hover over me to see the transition effect!</div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</body>
</html>Hover over me to see the transition effect!
Note: This example does not work in Internet Explorer 9 and earlier versions.
