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.

  • Necro comment or not, this duplicate action seems unfair to me. I get the downvote because the question shows no research effort. But, I've chosen to +1 this cause I found it usefull and, like OP, I would never think of asking anything that would bring me to the linked question.
    – Heki
    Mar 7 '19 at 11:55

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

  • You could also use regular HTML + CSS, HTML + JS, or Canvas. This question is a dupe of this other one IMO Sep 8 '15 at 17:36
  • thank you DA01. If you don't mind, could you add a small bit about there not yet being anything that's the same as .gif but with semi-transparency? It would make the question and answer more complete.
    – Seph Reed
    Sep 8 '15 at 20:32
  • @SephReed I'd argue this is a better solution that the GIF. So it's certainly not the 'same' but actually better...you can now better control the animation completely outside of the file format itself.
    – DA01
    Sep 8 '15 at 20:46
  • @DA01 I think it is. I mean, at least for my needs. I was just hoping you would put that part of the answer in so that future searchers see it up front, that "no, there isn't a semi-tranparent animated image type (yet). And there likely won't be, because this way gives you more control." or something like that.
    – Seph Reed
    Sep 8 '15 at 20:58
  • @SephReed well, there actually is something like the animated GIF. There's the animated png format: en.wikipedia.org/wiki/APNG Support isn't quite as wide as animated GIF, though.
    – DA01
    Sep 8 '15 at 21:01

Not the answer you're looking for? Browse other questions tagged or ask your own question.