How to create gif animation having html/css animation?

Question

css

I have such an animated illustration in html / css without using images.
I myself sit in chrome and, accordingly, when I made up I checked in chrome. Then I realized that adding prefixes for other browsers will not solve the problem of cross-browser compatibility, since I saw the picture in firefox.
For comparison, here is the display in Chrome and Firefox.

Even apart from the fact that one of the important animations in the illustration does not work in Firefox, several elements are displayed completely incorrectly.
But the question is not about adaptive layout. I realized that I was unlikely to master several of these animations for each browser.
Question:
I need to somehow record this animation and create a gif image with this animation so that it displays perfectly even in Firefox.
Tell me with what software you can do this, I have never worked with gif before.
Or if you have other suggestions, write.

Answer 1

1. You can try to solve the problem with css hooks.
2. To remove a gif, you can use the GifCam
3 program. Well, you can also make a gif in Gimp 2. Here is a lesson

Answer 2

Capturing a screen image as a GIF is easy with ScreenToGif .
The duration and order of frames can be easily changed using the built-in editor.