need cross-browser animation with transparency

[gib65]

Hello,

I created a png animation but I’m finding it only works in firefox. All my research tells me that png animations aren’t supported by any other browser.

I would use gif, but gifs don’t support transparency.

I’m told my only other option is Flash, but I’m not a Flash developer.

Does anyone know any other way to get an animation with transparency that works across all browsers?

Thanks.

[styxlawyer]

Animated GIFs do support transparency but it has to be encoded in such a way that each frame is erased before the next is displayed.

See here. (http://graphicdesign.stackexchange.com/questions/39772/making-backgrounds-of-animated-gif-files-transparent)

[Beverleyh]

Gif (animated or otherwise) supports 1-bit transparency, meaning that a pixel is either transparent or opaque (no middle ground)

Png-24/32 supports alpha-transparency, which means that pixels can have varying degrees of opacity.

Can you be clearer with what you are working with - maybe an example of the file. A link would be best.

[gib65]

Gif (animated or otherwise) supports 1-bit transparency, meaning that a pixel is either transparent or opaque (no middle ground)

Png-24/32 supports alpha-transparency, which means that pixels can have varying degrees of opacity.

Can you be clearer with what you are working with - maybe an example of the file. A link would be best.

I'm attaching the png file.

5747

If you're viewing this in Firefox, it should be animating.

[Beverleyh]

What colour background will it be visible on? Looks like it should be white? Try remaking/converting it to gif on a white base http://apng2gif.sourceforge.net/

[styxlawyer]

Gif (animated or otherwise) supports 1-bit transparency, meaning that a pixel is either transparent or opaque (no middle ground)

Png-24/32 supports alpha-transparency, which means that pixels can have varying degrees of opacity.

Can you be clearer with what you are working with - maybe an example of the file. A link would be best.

I'm attaching the png file.

5747

If you're viewing this in Firefox, it should be animating.

Yes, you're right, as you said in the first post, it only animates in Firefox. However, both Beverley and I have told you that animated GIFs will support transparency if encoded correctly. So you need to try a different approach. There are lots of free GIF animators on the web, but the best is probably GIMP. There's a tutorial here (https://www.gimp.org/tutorials/Simple_Animations/).

[Beverleyh]

To clarify, http://apng2gif.sourceforge.net/ supports transparency but the alpha-transparent pixels in your apng will convert to 1-bit transparency; You can set the colour of the base (eg white) so that a previously 50% opaque red pixel will be converted to a fully opaque pixel with 50% red and 50% white (a mix of the original alpha-transparent pixel colour and the selected base colour). Any fully transparent pixels from the apng will remain fully transparent in the gif.

[gib65]

To clarify, http://apng2gif.sourceforge.net/ supports transparency but the alpha-transparent pixels in your apng will convert to 1-bit transparency;

Yes, this is why I'm hesitating on using the GIF approach. The background won't be a consistent color.

I actually took a different approach. I'm using a static png and animating the opacity with CSS. That seems to work for my purposes.

Thanks for the pointers anyway. It taught me a thing or two about GIFs. :)

[Beverleyh]

You're very welcome :)