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
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.
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.
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
<!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>Note: This example does not work in Internet Explorer 9 and earlier versions.
Meet Mukul, a passionate visionary and a dedicated 3D printing enthusiast. With an insatiable curiosity for technology and a flair for creativity, Mukul has discovered a world where innovation knows no bounds. Armed with a deep understanding of 3D printing and its endless possibilities, he has become a true pioneer in the field, constantly pushing the boundaries of what can be achieved with this remarkable technology.