Today found the excellent of CSS3 animation that it support easing on the animate duration.

The provided default easing cover many common conditions we are using
(Use firefox or Chrome to view the effect):

CSS3 provide a simple way to make animation from one style to another without using flash or javascript. The easy way you do is add a transition attribute in the starting style. Below show a simple example:

#top_menu li a {
	color: #FFF;
	padding: 5px 10px;
	border-radius: 10px;
	text-decoration: none;

	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-o-transition: all 300ms linear;
}
#top_menu li a:hover {
	background-color: #F9C;
	color: #09F;
}

The result you can refer to the top menu on this page by using firefox or chrome.