Create a GIF from an HTML animation

html css-animations animated-gif google-web-designer
Vanojx1 picture Vanojx1 · Feb 11, 2016 · Viewed 21.1k times · Source

THE PROBLEM

I've created an HTML animation using google web designer, then I need to export my project as a GIF. Google web designer doesn't provide any tool to export as GIF so:

WHAT I'VE TRIED

I've tried to record my screen (using quick time player for MAC) crop and cut the result and then convert the MP4/MOV file to the GIF.

CONCLUSION

I'm not very satisfied with the result, the resulting GIF is very big (HTML is like 20KB and the GIF is 500+KB ) and the quality is mediocre.

Can someone provide me with a better solution or something to improve the quality of the result?

Thanks.

Answer

Related questions

How to make blinking/flashing text with CSS 3

Currently, I have this code: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back …

Read More
Imitating a blink tag with CSS3 animations

I really want to make a piece of text blink the old-school style without using javascript or text-decoration. No transitions, only *blink*, *blink*, *blink*! EDIT: This is different from that question because I ask for blinking without continuous transitions, whereas …

Read More
How can I create a marquee effect?

I'm creating a marquee effect with CSS3 animation. Now I can get the basic marquee effect, but the code is too specific for this demo. Is there a way to avoid using specific values like margin-left:-4200px;, so that …

Read More