Search My Post

CSS3 Transition

  • "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,
          
          
Posted by
Labels: ,