Create animated gif from animated SVG with CSS3

Question

I have a question - is it interesting to create an animated GIF from an existing animation consisting of SVGs animated using CSS3 transitions?

The existing SVG is basically a pie chart consisting of 4 parts that grow from the center, by switching to a width of .2s.2s width for each part. I made JSBin here:

http://jsbin.com/UcemUNo/1/edit?html,css,js,console,output

I looked around and all I can find is just “create an animated gif” through a webcam or existing images, but not from an element on a web page.

Any pointers are very appreciated!

Answer 1

The solution found is screen recording! I downloaded a program called Camtastia, recorded the animation in my browser, and exported it as an animated GIF. Completion of the task.