Platinum Partner
css,html5,tutorial

CSS3 Transitions: A Small Tutorial

  • "Transition" refers to a change of the state of an object.
  • In CSS3 we can show the transition of an object using a transition property. Variations of this property 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 functions 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:
          
          

Published at DZone with permission of {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}