- “Transition” refers to change of state of an object.
- In Css3 we can show transition of an object using transition property. Variation of this properties for different browsers are transition,-moz-transition, -moz-transform ,-webkit-transition, -webkit-transform,-o-transition.
- The other transition properties have duration,property,delay and timing function to control the css3 transition.
Testing CSS3 Transition:-
- The HTML css3 transition code css3Demo.html ,
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Transition Demo</title>
<style>
div.name {
color:white;
text-align:center;
padding:100px;
width:100px;
height:75px;
background:black;
border:4px solid red;
border-radius:0px;
transition:border 2s, border-radius 2s, color 2s;
-moz-transition:border 2s, border-radius 2s;
-webkit-transition:border 2s, border-radius 2s;
-o-transition:border 2s, border-radius 2s;
}
div.name:hover {
border-radius:400px;
border:4px solid yellow;
background:green;
color:yellow;
}
</style>
</head>
<body>
<div class="name">SANDEEP</div>
</body>
</html>
- Firebug Inspection ,
Output:-
- It displays the square on “LOAD” of HTML page,
- On “HOVER” of that div element the transition occurs and becomes round with change in border radius,color and border style.The result will look like,
