What is TRANSITION?
It is animation without using swf or other animation files.
For example, the color of the font, size of the font, background color,etc can be changed GRADUALLY when the user hover over a link.
Move the mouse over the links given below to understand what is transition.
In the above demo, the background color changes SLOWLY
Font size increases slowly
Height of the div increases slowly
Copy the following code in NotePad and save it as abc.htm and run that file
This transition will not work in Internet Explorer
| <html> <head> <style> div { font:normal 15px arial; width:300px; transition-property:width,background-color; transition-duration:1s; -webkit-transition-property:width,background-color,font-size; -webkit-transition-duration:1s; -moz-transition-property:width,background-color; -moz-transition-duration:1s; -o-transition-property:width,background-color; -o-transition-duration:1s; background-color:#f0f0f0; color:White; margin-bottom:2px; padding:10px 30px; } div:hover { font-size:20px; width:500px; background-color:Red; color:#808080; } div a { color:#336699; text-decoration:none; } </style> </head> <body> <div> <a href="abc.htm"> This CSS deals with Transition </a> </div> <div> <a href="abc.htm"> Transition is animation using css </a> </div> <div> <a href="schedule_master_aed.asp"> Enjoy this ASP Store </div> </body> </html> |
No comments:
Post a Comment