Demo 5 - Animating the background-image property

Right now this only works on webkits built from 2012 onwards. It's not part of the spec (yet?).

Plan

1. Make a div with a width and height
2. Change the background-image property

Demo

Code

This only works on Chrome 18+ and on Webkit Nightlies built in 2012 onwards. It seems to be a side effect of the CSS4 crossfading work, though this is a lot more useful.

<div id="cf6_image" class="shadow"></div>

Then the CSS:

#cf6_image {
	margin:0 auto;		
	width:450px;
	height:281px;
	transition: background-image 1s ease-in-out;
	
	background-image:url("/images/Stones.jpg");
}

#cf6_image:hover {
	background-image:url("/images/Summit.jpg");		
}	

Pretty cool - this can easily be extended by simply changing the background-image property with JS, and makes things much much simpler. I'm not sure if this behaviour is part of the spec or not, and I haven't seen support anywhere other than in the afore mentioned browsers.

For a slightly more detailed example, have a look at a simple gallery using filters and fades.

Comments/Questions?

Please add any questions/corrections/extra info below. Please be courteous to other users.

Contents

1. How to use transitions
2. How to use transforms
3. How to use animations
4. Cross fading images
1. On hover
2. On button press
3. With timer
4. More than just fades
5. Animating the background-image property
5. Sliding content
1. Sliding by transitions
2. Sliding by transitions + translations
6. 3D Flipping content
7. Animated Accordions
8. Notes on browser support
9. How will it look in legacy browsers?
10. Further Reading