What formats supporting animation are suitable for the web and what are the pros and cons of each.
It depends on what type of animation you need.
- .gif images - Fully supported, but limited use with frames. .png files are supposed to have support for animation, but you don't see it in the wild very often, if at all.
- Flash, Silverlight, and other plugins - Flash has the most ubiquity, but all plugins need to be installed in the browsers and can't necessarily be counted on to be installed on a user's computer. May not work for mobile platforms.
- CSS3 - Limited transforms or animations, limited browser support.
- HTML5 video - The future, but limited browser support.
- Canvas tag - Modern browser support, but supports rich animations.
This is in addition to Virtuosi Media's great answer:
It can also be interactive. If you scroll to the Smart Cover section of Apple's iPad page, you can see it in action: http://www.apple.com/ipad/features/
When overlaying images that contain a transparency on-top of animated images on layers beneath the image. You will find that PNG24 is the only image format where the anti-aliasing blends correctly with the background imagery. With GIF and PNG8 you are going to find that your edges are all chunky. Doesn't look very good, but really easy to miss.
What about https://lottiefiles.com/ it seems it is becoming quite used?
And it seems new animation programs are also adding it as output format...
Well, it seems only (for the moment) https://www.synfig.org/ is opensource, but already support this format!
Also is voted for blender https://blender.community/c/rightclickselect/r5fbbc/?sorting=hot