Semi Transparent Animations?


I would like to have a semi-tranparent animation on my website. Something like a gif, but with opacity that isn't just on or off.

Does something like this exist yet? Is it time for someone to create a new image file type? What options do I have for adding animations with transparency to a website?

EDIT: The "duplicate question" of this is a question with overlapping answers. Two different lists. It answers this question and more, which is very very nice, but it wasn't intuitive to ask from my perspective, and is similar to comparing the list result of "what dogs have curly hair?" to "describe in detail all the dog types."

That is to say, these two questions point to relatively the same place, but come from completely different directions. Like road signs on opposite sides of a city, I don't think a merge is the right decision.

EDIT #2: The "duplicate questions" answer doesn't mention that gifs don't have semi-transparency. If you search for the word "transparency" there's zero hits.

9/8/2015 8:25:00 PM

Accepted Answer

You can use PNGs or SVGs (which both support alpha transparency) and animate it as a CSS sprite animation. Here's one example.

9/8/2015 4:39:00 PM