Wednesday, December 29, 2010
HTML5: CSS3 Transitions
CSS transitions make for a lively web, you don't need fancy JS libraries with all the AJAX functions to transform images and HTML elements. You can achieve all that using CSS, isn't that neat? There is quite a lot you can do with transitions property, I've used it to ease-in the dropdown menu, but you can certainly use it for rotating elements and fading effects. Sadly, you'll have to use -webkit and -moz prefixes to apply these transitions, implying the support is not standard yet and IE (even IE9) won't perform any transitions. Art of Web explains these transitions in more depth and get hifi describes navigation based on transitions. On a side note if you want to see a good selection of dropdown menus check out specky boy. The transitions used for dropdown menu are:

#nav li {-webkit-transition:all 0.2s; -moz-transition:all 0.2s; }
#nav li a {-webkit-transition:all 0.8s; -moz-transition:all 0.8s;}
#nav li ul {-webkit-transition:all 1.0s; -moz-transition:all 1.0s;}
#nav li ul li {-webkit-transition:height 0.5s; -moz-transition:height 0.5s;}

-- Baldeep Hira