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

I have the following CSS3 Animation going on: 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?


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.

You can try Cockos LICEcap. LICEcap is GPL free software. It directly captures the screen and saves it in .GIF or .LCF formats.

Some of the features of LICEcap (from its website):

Features and options:

  • Record directly to .GIF or .LCF.
  • Move the screen capture frame while recording.
  • Pause and restart recording, with optional inserted text messages.
  • Global hotkey (shift+space) to toggle pausing while recording
  • Adjustable maximum recording framerate, to allow throttling CPU usage.
  • Basic title frame, with or without text.
  • Record mouse button presses.
  • Display elapsed time in the recording.

See a GIF version of your animation :)

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

You can test: GifCam.

- Version 4.5 - 686 KB (single exe file no install required). - Compatible With Windows 8,7,Vista,XP.

  • Practical, easy and fun animated gif making app.
  • Works like a camera that stays on top of all windows so you can move it and resize it to record your desired area.
  • GifCam has only a mouse-centric interface.

Capture easily : When you’re ready, click “Rec” to start recording or click “Frame” to record a single frame.

  • Full Screen to ignores recording area and capture the Full Screen.
  • Preview: preview with size.
  • Recording different frames dimensions (resize while recording).
  • Capture cursor: useful for demonstrating the mouse interaction.
  • Export To AVI: export your record to uncompressed video.

Capture / Editing: Simple and powerful.

  • Adjust frames delay, Delete frames/add or remove delays, Resize, Crop, Adds reverse frames, 5 color settings,Hue And Saturation, Add text etc...
Category: css Time: 2012-06-09 Views: 2

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 0.247 (s). 12 q(s)