I think you're mistaken. The first example is only ~700 bytes in size. Show me an animated GIF, with those dimensions, that many frames (to maintain that level of smoothness), for under 700 bytes?

(HTTP overheads are not factored since HTML + CSS is one less request than HTML + CSS + Image resource.)

CSS will normally also get zipped: you are comparing compressed gif to uncompressed css

Alpha channel support. Transparency in gifs is boolean, not a linear scale.