Animated .GIF vs Spritesheet + JS/CSS
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)?
Filesize
So, I'm honestly not sure which will be better here since I don't understand the compression of frames in .gif. My guess would be that they would end up about equal if I can swing it right, but if this is wrong, or if this is a factor for a different reason let me know.
The main advantage here, in my mind, goes to Spritesheets as I would be able to include multiple animations on a single sheet (and we're talking hundreds of animated sprites here). And based on one of my previous questions, I know that I can easily pull out a single frame in CSS using image-rect(). Where as with a .gif file I really can only include one animation since each will likely have a different duration.
Addendum: Also, some of the animations repeat for a given sprite, so the spritesheet would only have to have one copy of the frames, where as a .gif would need to have all the frames (at least to my knowledge).
Performance
Guessing here again, my intuition tells me that animated .gifs are going to be significantly faster as I won't have to manage all the animations at the same time I'm doing a lot of JS code for other things. But, I don't know for sure, maybe browsers take a significant hit with 30+ animated .gifs.
My Sanity
The spritesheets are made for me, so my work would be high in the beginning (writing and animation engine and hand coding one/each sheet). But once written, it is usable for good and a change in a spritesheet requires minimal changes to code.
On the other hand, animated .gif files are not a cake to make in Photoshop (if you have a better program, please let me know). And each one must be hand made and is a long process. But, once they are made, I don't really have to change them. My spritesheets aren't likely to change very quickly, so chances are it will be a one and done.
My Question (tl;dr)
Which is going to scale better to the hundreds of animations in terms of filesize (including HTTP header transfer as it will go over the web), performance in modern browsers, and ease of creation (lowest priority, but if you can make my job easier, or argue to this, I would be grateful), Animated .gif files built from spritesheets, or simply using CSS and the spritesheets I already have?
Examples
VS 
Answer
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,
<canvas>, SVG, WebP...
More info in the JsFiddle demo page.