How to take a CSS animation from a browser, and export a GIF of it

animated gifanimationcss

I have the following CSS3 Animation going on: http://dabblet.com/gist/2884702. It's basically a simulation of a mirror rotating on its x-axis.

Now, I wish to present that in a PowerPoint presentation. Since PowerPoint doesn't have the webkit engine, I want to extract an animated GIF image of that animation, and embed it into my presentation.

The problem? No matter what I've tried, I couldn't make a reasonably smooth animated GIF.

I've Googled and found many free software which claim to do the job, tried several, none worked as expected. I've tried IrfanView, same issue (also their site makes me want to vomit).

So, is there a solution? Or am I doomed to not be able to display it?

Best Answer

Use Camstudio. It's free, and it makes a video of your desktop, and whatever you choose to display.

So... start recording, record a short video of the animation, then edit the video and crop out everything you don't need. There. You've now got a video you can either embed in your presentation, or convert to an Animated GIF file.

EDIT Ok, so you want to embed the AVI file you made of this into the presentation. According to Microsoft...

Method 4: Insert the movie as a package

You can insert a movie file as a package in a PowerPoint presentation. To do this, follow these steps:

On the Insert menu, click Object.

Click Create new, and then click Package under Object type.

When you insert a movie as a package in a PowerPoint presentation, the movie file is kept inside a package that is embedded in the presentation. If you move the presentation to another location, the package is also moved to this location.

This method is the only way that you can embed a movie into a PowerPoint presentation. A package is an OLE2 wrapper object that embeds an OLE stream into a file. This file registers itself as a Packager object. When the Packager object is opened, the contents are read. Then, the appropriate extension verb is called. Typically, an .avi file is verb-activated with Windows Media Player.

You may want to use this option if you are not concerned about the size of the PowerPoint presentation or about the speed at which the presentation will play. When you use this method, make sure that all the content is in one file. If you use this method to insert larger .avi files, the computer may experience performance issues.

Movie playback

To make the Packager object function in a presentation, follow these steps:

Right-click the inserted object, and then click Action Settings.

Click Object Actions. Then, click Activate Contents in the Object Actions list.

When you click the Packager object in a presentation, the movie is played back in a separate window above the presentation.

That's from this Microsoft Article

Now, if you'd rather convert the AVI to a GIF file to make embedding it easier, you can use an online converter like Zamzar.

Related Question