webkit for Webkit-based browser and -moz for Mozilla-based browser. The trasition-duration represent how long the transition should last and transition-timing-function represent how the animation will proceed over time. On the CSS above we just create the animation in 0.20 seconds with ease-out function.

These step will add animation into any style changes and make them animate. For example the anchor has property width with value 20px and the anchor has different style when user hover it (ie : width: 40px), the width changes from 20px to 40px will be animated.

#menu-css li {
 display: inline;
 list-style: none;
}
 
#menu-css li a {
 
 /* Border Radius */
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 
 /* Border Shadow */
 -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
 -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
 box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
 
 /* Animation (Webkit, Gecko & Mozilla) */
 -webkit-transition-duration: 0.20s;
 -webkit-transition-timing-function: ease-out;
 -moz-transition-duration: 0.20s;
 -moz-transition-timing-function: ease-out; 
 
 color: #ffffff;
 background: rgba(0,0,0,0.2);
 display: inline-block;
 padding: 5px 15px;
 outline: none;
 text-decoration: none;
}
 
 #menu-css li a:hover {
 background: rgba(0,0,0,0.5);
 padding: 5px 25px;
 }
 
 #menu-css li a:active {
 background: rgba(0,0,0,0.1);
 -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
 -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
 box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
 } 

Browser Issue
Since -webkit-transition has supported by latest Webkit-based browser including Safari and Chrome, Our pure CSS menu with animation above will works perfectly. Unfortunately -moz-transition will be introduced on Firefox 3.7 (Gecko 1.9.3) so the animation will not works on latest Firefox.

jQuery Animate
For a while Browser issue was disrupt our pure CSS menu, but of course we won’t stop to make it works. Using jQuery we can replace the CSS animation with $.animate() function. Surely with $.animate() function we just need to specify the pixels number for increasing the button’s padding.

For button opacity we can’t use opacity property in $.animate() function because it will make our button and text transparent. Since we just need to make the button (background) transparent we need $.animate() property that support rgba, we can use Mehdi Kabab’s plugin which is modification (to support rgba) from John Resig’s background color plugin.

If the user mouseover the button, we set its default padding and animate it by increasing its padding and opacity and when mouseout we revert to the default CSS value. When user click (mousedown) the button we decrease the opacity into 10% and revert to 50% when mouseup the button.

$(document).ready(function() {
 
 $('#menu-jquery li a').hover(
 
 function() {
 
 $(this).css('padding', '5px 15px')
 .stop()
 .animate({'paddingLeft' : '25px',
 'paddingRight' : '25px',
 'backgroundColor':'rgba(0,0,0,0.5)'},
 'fast');
 }, 
 
 function() {
 
 $(this).css('padding', '5px 25px')
 .stop()
 .animate({'paddingLeft' : '15px',
 'paddingRight'  : '15px',
 'backgroundColor' :'rgba(0,0,0,0.2)'},
 'fast');
 
 }).mousedown(function() {
 
 $(this).stop().animate({'backgroundColor': 'rgba(0,0,0,0.1)'}, 'fast');
 
 }).mouseup(function() {
 
 $(this).stop().animate({'backgroundColor': 'rgba(0,0,0,0.5)'}, 'fast');
 });
}); 

Conclusion
CSS3 offers us many advantages but sometimes we can’t take that advantages due to browser support, thankfully for jQuery offers us the alternative.

download: htmldrive.net/items/download/223