I've created a simple animation where I have four images (bits of steam) that fade in then out in sequence (shown below). This works fine until I export the animation out and convert it to a gif.

As you can see from the gif below, the fade in/out motion then stops working and just shows a hard cut of the images which doesn't look at good. Hopefully someone can help!

enter image description here

  • GIF only suppors 1 bit alpha to have it fade as transparency would not work. Make a white background then export.
    – joojaa
    Commented Jul 22, 2015 at 11:53
  • Ah okay thanks @joojaa, unfortunately I have to keep the transparent background in order to put it on top of a coloured background in css Commented Jul 22, 2015 at 11:58
  • Then it will not work! Unfortunately theres no easy alternative to this. Easiest being, splitting image up and animating individual images with css.
    – joojaa
    Commented Jul 22, 2015 at 12:02
  • yeah I've done that already but we need it to work across all devices which animated css doesn't.... anyway, thanks for the help! :) Commented Jul 22, 2015 at 12:03
  • Does the background change? If so, how many different backgrounds are there? Because if it's a couple of different backgrounds you might wanna just place the background with the GIF animation to solve the transparency issue. Not a lot of work compared to the alternatives.
    – Aziz
    Commented Dec 31, 2015 at 13:08

2 Answers 2


Let us try to build an answer out of my comments.

GIF has no real transparency, either a pixel is there or it is fully transparent. That is it has 1 bit transparency. This means you can not fade parts of a image into transparent. There is really no good workaround and there is no real alternative for GIF animations in this case.

If you must, it is possible to build a raster effect where alternate pixels dissapear from view. A bit like dither but on the alpha channel. It is far from ideal, but might better than nothing (altough no animation may be better).


If you want a fading out transition you're going to have to copy the triangles in place with photoshop and lower the transparency each step so its color stays but as that color gets lighter it appears to fade away.fade away!

  • Did not down vote. But i am pretty sure OP wants the resulting gif be transparent too. Now your image fades but you cant overlay that on top of a textured background.
    – joojaa
    Commented Aug 3, 2015 at 13:32
  • @joojaa I'm pretty sure that .gif is transparent but if not, and i am totally cool with being wrong I just forgot to turn on the option. Oops. Commented Aug 3, 2015 at 13:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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