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:
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
