CSS3 Animation Techniques

You can get eye catching animations in CSS3 with the transition attribute. Since the standard hasn't been ratified by the W3C yet, you will have to deal with quite a lot of duplicate properties -- one for each type of browser. 

The syntax is pretty much straightforward. For each element ID you will have to define the property that will get changed throughout the animation (all, border-radius, background), the time to run and the type of effect. 

In the example below I'll show you how to get a cross fading image effect which will come in handy if you're going to write an image gallery. The flow is quite obvious: start off with two images on top of each other and set up the opacity of the top one to 0 on hover.

CSS code:

#wrapper {
	position:relative;
	height:275px;
	width:183px;
	margin:0 auto;	
}
#wrapper img {
	position:absolute;
	left:0;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

#wrapper img.top:hover {
	opacity:0;
} 

HTML code:

Result: