I stumbled onto various sites using different media files to express more than a simple png image could do, but was wondering what is best amongst them?
MP4 - close to no CPU usage assuming the machine can hardware accelerate it, can't do seamless looping really, needs some fiddling about to get it to behave on a webpage, can't do flat colors well at all, medium to low filesize. Enjoy your colors been every so slightly off in most cases.
GIF - Fire and forget, just works, loops seamlessly, perfect flat colors but only 256 shades, filesize, performance and quality really really depends on the competence of the person creating the GIF. Looks the same in every browser for the last 20 years, colors are exactly what you see when encoding.
CSS Animation - Can be very CPU heavy or moderately CPU heavy depending on talent of developer working on it, needs development skills to implement, perfect rendering of what you want but you're limited in what animation you can actually ship, the others can ship anything your video software can output. Needs to actually be tested in every browser you want to support.
Thanks! This in-depth comparison is really helpful. Cleared a lot of my doubts :)
Video if it's just from an optimisation point of view.
I miss SVG in this comparison question. Love to hear about that one also.
Oops! Guess I had to be discreet in my framing of question. I meant css animation (svg). Thanks for mentioning this. Otherwise, imo @john P gave valid explanation on it.