Animated .GIF vs Spritesheet + JS/CSS

Question

Which will scale best for performance, file-size, (and my sanity): Animated .gifs or a spritesheet with animations using CSS (and JS when need be)?

File

Answer 1

As I was curious, I implemented it in javascript.

JsFiddle demo (edited image host as per comments).

What I found out:

• It works! And better than expected.
• The CPU usage is actually low (did not test it in IE6 dinosaur and I'm sure it would require "fixes").
• The size can be cut off, and/or quality can be increased, significantly (source-dependent).
• Unlike Mikey G.'s concept, this works even if you zoom in/out (try it in both).
• It allows variable frame duration just like a gif.
• With more work, it could even have a player-like API (pause/resume, fastforward, skip, etc...).
• Leverages other formats: 8-bit alpha PNG, progressive JPEG, , SVG, WebP...

More info in the JsFiddle demo page.