Animated Sprites with CSS3 Transitions

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.

CSS sprites are a method for creating complex rollovers without using JavaScript.

CSS3 animations (or more accurately, CSS3 transitions) is a new feature that has been added to some newer browsers, most notably WebKit-based browsers like Chrome and Safari. Like sprites, CSS3 animations don’t require JavaScript.

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

The first obvious benefit is that the effect does not require any JavaScript. Another benefit is that nonsupporting browsers will degrade the effect gracefully and they will just display a normal CSS sprite rollover effect, without the animation. This is great, because none of the graphics will be missing (although most of the effect will be lost).

Some Drawbacks

This method has the usual maintenance and image creation issues that are associated with CSS sprites, while also providing a limited experience in nonsupporting browsers. Also, the sudden appearance of the sprite background on nonsupporting browsers is not as visually effective as the animated version. I suppose you could integrate a JavaScript solution for the other browsers, but that would probably create more work than it’s worth.

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.

21 Responses

In order to see the difference, you need to view the demo in a WebKit browser like Chrome or Safari. In those browsers, you’ll see animation, but in Firefox 3.6 and IE, you’ll only see a regular css sprite rollover.

The key here is that we can have animation without the use of JavaScript, which is not possible with sprites alone.

It’s true, you have to use a browser that supports CSS3 transitions, like Safari.

What you can already to with all browsers, is to change the background position. Then you’ll just go from state A to state B in a flash. When you add a transition, you can gradually go from state A to state B, while not having to write much more code at all.

And… by using simple jQuery, you can get the animation effect even in IE6 and above.

Good to know when the next boom in browser compatibility hits… but so many of these new CSS3 Transitions/HTML 5 tricks are and have been available via jquery, why wait for mass targeting? Get the effects now.

These are pretty nice examples. I’ve used this technique a bit already, however, what I really would love is for the sprite to FADE in on hover rather than SLIDE in. I would jump up and down for joy if I could get that to work with just CSS3. Unfortunately, unless I’m missing some magic CSS3 spec, this must not be possible as I have not been able to make this work. Background colors can fade in and out on hover, so why not background images?

What do you mean by “more work than it’s worth”? I use a CSS sprite technique for the rollovers on a nav menu; Transition-supporting browsers use the CSS animation, whereas I accomplish the same effect in other browsers using 6-ish lines of jQuery. If would be less if I didn’t have to have unique states for the first and last menu items.

I’d like to see that code and the result. First of all, even if what you’re saying is correct, it would still be less maintainable that way, which is partly why I said it was “more work than it’s worth”.

Also, as I understand it, you can’t animate backgrounds with jQuery unless you use a plugin. Again, I’d like to see the code you’re talking about, because I don’t believe what you’re saying can be done (but I could be wrong, I’m not being arrogant here, just telling you what I think).

you can use hover() and specify the graphic for each state. Insert the animate() inside of there and you have cross browser fading/sliding for all of the major browsers used (IE, FireFox and Safari) and fairly far back.

As I mentioned in another comment, jQuery’s animate() method cannot do backgrounds. The documentation says that the animate() method can only animate numeric values (like width and height), and background properties don’t qualify.

I have tried in the past to animate two states normal and hover to fade in on hover and fade out on mouse out with css transition property but what I always get is something similar to the first two examples, instead of fading the image comes down just like that. do you know if there’s any way to acomplish this without javascript and only css3?

Hilarious that Microsoft is advertising their “Free Download” of IE 9 on this web page. They call it “for a more beautiful web,” when has IE ever been described as a beautiful browser? The nerve for them to feed that to a CSS3 tutorial. Bastards!

Clicked on the ad just for you. Have a Mac. Way to waste your buck MS!

Having trouble getting these to recognize the external CSS style sheet (works fine with the internal style sheet). It recognizes some of the styles on the style sheet (i.e. changes to the ul border size), but not the ‘meat’ of it–the sprite/transition stuff (only a blank square within the border is seen; no image on rest or hover). Any thoughts?

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.