How to take a CSS animation from a browser, and export a GIF of 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 :)

Looks like someone has created a tool here: https://www.npmjs.com/package/@scenejs/render

source: https://github.com/daybrush/scenejs-render

I haven't tried using it yet, so can't vouch for it, but it claims to convert css animations to video files.