How to Create Animations with Animated Gif on CSS3 - dummies

How to Create Animations with Animated Gif on CSS3

By John Paul Mueller

Many sites use animation to good effect. CSS3 allows you to add animation to your site in serval ways, including using animated GIFs. Text conveys an abstract level of meaning, graphics can make the meaning more concrete, but the use of good animation can communicate in ways that text and standard graphics can’t. The addition of motion has a huge impact on how the viewer sees the information.

The Animated Gif tool helps developers create simple animations. You access it by clicking Animated Gif on the web Tools menu of the main page. Let’s show how the tool appears when you first access it.


Of course, animated GIFs can also be a lot of fun. There are people out there who create animated GIFs to entertain, generate a laugh, or to dress up just about anything having to do with the Internet.

For example, you can find a wide range of free animated GIFs at, Heather’s animations,, and amazing-animations (amongst many others). The point of using this tool is to create an animated GIF for special circumstances that the free libraries don’t support.

Animations are actually a series of still pictures that are presented one at a time at a specific speed. There are complex applications that can perform all sorts of special effects, vary the time between transitions, and do other things that would make your hair stand on end.

Complex applications are for professional developers. All you need is a series of images to use this tool, which makes it simple enough for developers.

You can create the images using any tool you want, such as Paint. In fact, the images need not be drawn at all. An animated GIF could actually consist of a series of screenshots showing the transition from a starting point to a final result.

The point is that you display a series of images, in a specific order, to produce a result that appears to have some type of motion. The example is a simple box with circles in it. The animation occurs when each of these circles turns red in turn. You could use it as part of a progress indication.


To create an animated GIF, click Browse, select the first image in the series in the File Upload dialog box, and then click Open. You perform this task for each image in the series until you’ve uploaded all the images. This is how the example appears at this point.

If you make a mistake and upload an image in the wrong place, simply click the X for that image’s square to remove it from the sequence.


You need to decide how large to make your GIF and how fast the animation should run. These settings usually require a little trial and error. Try the settings you think will work and then click MakeGif. What you’ll see is a sample of the GIF on screen. When you’re happy with the result, click the Download Image link that appears next to the GIF.

Of course, now that you have an animated GIF, you’ll want to see it on a page. All you need to provide is the standard <img> tag — the animation is built into the file you downloaded. The following code shows how to create a test page for this example.

<!DOCTYPE html>
 <title>Test an Animated GIF</title>
 <h1>Test an Animated GIF</h1>
 <img src="Test.GIF" />