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

I'd take a look at this:

http://adamducker.com/blog/7/animated-gif-for-css-sprites/

I personally think you'd be crazy to use a spritesheet, but i guess it depends on how many animated gifs you'd have to bring over otherwise

I don't know what your limitations are, but here's a fiddle using CSS3 step() to animate a spritesheet:

http://jsfiddle.net/simurai/CGmCe/

Answer 2

One other issue related to CSS sprites, at least in the current browsers, is scaling "jitter". You can scale the GIF file to whatever size you need (presumably smaller), but if you try to scale the CSS sprite you run into jitter because of rounding errors (background-position is based on the the scaled coordinates, not the original). If someone knows another way of handling scaled animated sprites, that would be great to know.

ImageMagick does a great job of creating animated GIFs or sprites.