As you may have read, outside of gradients, you can’t change a background-image with CSS transitions. Or can you? At InControl Conference last week, Greg Rewis spoke about Transitions, Transforms and Animations. A question was asked about showing one background-image on load and transitioning to another in a subsequent pseudo-state. You can always change the background (we do it all the time in menus on :hover), but you can’t apply sexy transitions to that change. You can, however, transition a background position change. In the first demo, I’ve created a sprite that has both background states which load with one image, and then move to the other when the pseudo-state is triggered:
(Thanks for your nice use of this effect at the bottom of CSS Tricks, Chris Coyier!)
In the InControl wrap up panel, someone asked a question about creating a menu that has no background image to start, but on hover, would transition to the background image. While it’s correct that you can’t do exactly that, all good CSS’ers know there’s usually a clever work around. An idea occurred to me on stage that I’ll share here. Using a sprite again, have the starting portion of it transparent (gif or png). You can create the effect of going from no background to a background image by simply changing the background-position.
What creative uses can you think of for CSS transitions and background images?