How to convert CSS3 animation in *.gif

Reading Time: 3 minutes

In last few years, it is trendy to provide better user experience by adding small changes in the interface using css3 animation. Currently, experiments with this feature take us far away from simple effects. If you have a good imagination and tech skills, you can even create the solar system in the pure CSS.

See the Pen Solar System animation – Pure CSS by Malik Dellidj (@kowlor) on CodePen.

However, in production, we still use css3 animation for more pragmatic tasks, for example for creating pure CSS spinners. There are a lot of solution for beautiful spinners in open-source.

See the Pen Sit ‘n Spin by esjay (@esjay) on CodePen.

They are compatible with most modern browsers, but sometimes for some reasons, the need to have the same spinner in gif format can arise. For example, if the same spinner must be used in the third-party services, that are included in your solution in the iframe. Or if you need compatibility with very old browsers. The first idea that comes to mind is to search some solution, where you can load your page with the spinner and obtain gif at the end. Here I need to disappoint you. There are no such services. The reason for it is the fact that CSS3 animation and GIF are very different technologies.

There is still the way in which CSS3 animation can be converted in the *.gif. To do this, you need to follow next steps.

  1. Make screen video of your CSS3 animated component. If you need your *.gif to be in the transparent background, first of all, move an animated component to the separate page with the white background. Config your monitor, so it wouldn’t distort colors of your component. Choose the tool for screencasting that allows saving video directly in the *.gif format. I used GifCam (http://gifcam.en.softonic.com/). This light free software that wouldn’t need even installation.

If you do not need your *.gif to be in the transparent background or if white background works well for you then the first one step was the last one. However, most probably you will need your *.gif to be in the transparent background. To do so, follow next steps.

  1. Open your *.gif file that you saved after screencasting in the Photoshop (yes, it can do this, I also was surprised by this fact). Photoshop will convert you *.gif in the file with multilayers, every of which would be the frame of your *.gif.

  2. Follow next one instruction to make the background transparent in every layer: http://graphicdesign.stackexchange.com/a/21686. Note that you can create one Hue/Saturation, one Invert, and one Curve layers and use them to make all your layers from the *.gif transparent. You will only need to create the separate mask for every layer.

  3. After you finished making the background transparent in every layer, you need to make the video from this layers. For this purpose go “Window” -> “Timeline”. The new tool will appear on your screen. In it, you obtain an ability to manipulate with frames in your future *.gif video. You can choose what layer of your file show on which frame, and how much time it should be displayed. If you are planning to make *.gif file from the frames, do not forget to choose in the “Looping options” – “Forever”, so your video never stop playing until it would be displayed.

  4. Use “Play” button in the Timeline window to see how your *.gif would be looking like. In this step maybe you will need to remove some frames at the end or at the beginning or at the end of the video, so it will look more smoothly in endless playing mode.

  5. When you think that you finished with the improving your future *.gif, go “File” -> “Save for Web… “. Choose an appropriate option for you. Also in this window, you can see a preview of the *.gif that you have created (hit button “Preview…” in left bottom corner). If everything looks good push “Save…”. Finish!

If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.

Olena Sovyn
Staff Software Engineer (London, UK). I ❤ React, Redux, lodash, React Storybook, and functional programming overall. Always open to learning something new

3 Comments

  1. This is still a lot of work, and screen capture could easily be not accurate bc you’re screen capturing a web browser engine which is unstable and either both the screen capturing service or the web browser could cause lag. Is there still any way to do this?

    And a request for another guide instead? How to extract a animated resource instead from any website to be it’s own HTML page with that only animated CSS/HTML resource only in that HTML file instead. So we could isolate the animated resource from anything and could scale too responsively lossless at any size. So it’s much easier to screen capture them in the future, because we could easily customize the background color. Bc getting loaders natively in website could be a pain bc they’re on top of the website, unlike in just a frame on things like codepen.

    Thanks as always

  2. Thank you Olena! This guide was very helpful. I went from reading this guide to my completed gif in less than 10 minutes!

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Spelling error report

The following text will be sent to our editors: