I don’t think I’ve seen this specific method used yet, but it seems like one of those super obvious techniques. This technique is not really anything new, it just combines two concepts that most CSS developers should be fairly well familiar with by now.
Combining the two methods, we can create a simple animated rollover effect with endless possibilities. Check out the demo page using the button below to see four somewhat silly examples that I created. The examples are not necessarily the most attractive or practical, but they’re just some over-the-top examples to demonstrate what’s possible when you combine these two CSS techniques.
You’ll notice that the fourth example (the one that says “insert disc here”) is using an inline image with a background that animates on the anchor that wraps it. This gives the animation some depth because it looks like the disc is being inserted into the overlaid image.
In the examples on the demo page, I’m using transparent PNGs taken from the Isloo icon set created by Asher Abbasi for Iconfinder. So, for a browser like IE6 that doesn’t support transparent PNGs, you’d have to use a PNG hack or else use JPEGs or GIFs to ensure the degraded sprite looks correct.
Benefits to Using this Method
I’m not providing any code to show you in this article, because the CSS is pretty standard: Your usual run-of-the-mill CSS sprite code, along with the required proprietary CSS3 transition code to get the animation working in supporting browsers. From what I can tell, it works in Chrome and Safari. Firefox 3.7 is supposed to have CSS3 transitions, so anyone with an alpha version installed can test it out. Opera evidently supports CSS3 transitions, but it doesn’t seem to work on backgrounds. If anyone knows how to fix it for Opera, please let me know.
As mentioned, I’m sure the possibilities for creating some unique CSS-only animations are endless, especially when you factor in transparent PNGs,
z-index, fixed backgrounds, and other CSS techniques. Feel free to comment and offer any feedback or other ideas that can be executed using this method.