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.
What is the difference between CSS Sprites and CSS3 Transitions?
I think we can get the same result from sprites technique.
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.
Actually, this is not correct. You can’t animate backgrounds with jQuery unless you use a plugin. See this article by Jonathan Snook:
http://snook.ca/archives/javascript/jquery-bg-image-animations/
It works in Firefox 4.0b3 for Mac!
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?
I’m looking for the exact same thing but have been unable to accomplish it so far. Anyone know any CSS tricks I’m not aware of? Fade ins/out combining sprites and CSS3 transitions.
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).
look up animate() at http://www.jquery.com
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.
CSS3 transition code is proprietary??
I’ve done something similar on my blog, but applying transitions to several elements. Have a look here: http://design-o-man.com/flash-like-pure-css3-transitions/
ps. Really like the insert disc idea you’ve done.
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?
Great article, I had created something like that in my blog “Creating an Animated CSS3 Horizontal Menu“.
Please check it out!
Thanks
Awesome demo! I can’t even fathom the true potential of CSS3.
Interesting technique, the demo is working very well in Ubuntu. Thanks for the post Louis.
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?
You’re going to have to provide a demo that I can look at, otherwise I can’t help you.
See the following two links for a discussion of creating test links that people can help with:
http://css-tricks.com/13414-seriously-just-make-a-jsfiddle/
http://css-tricks.com/6263-reduced-test-cases/