Coding with Jesse

Using Animated GIFs with CSS

December 23rd, 2006

Now that plain old HTML, CSS and JavaScript have made the web quite sophisticated, Flash isn't really as necessary as it once was. Nonetheless, I still see Flash being used to make things, well, flashy. Flash is often used just to add a touch of animation, like things moving around when the user moves their mouse, and other simple effects.

Well many, if not all, of these kinds of effects can be achieved with plain old CSS and JavaScript, thanks to animated GIFs. Yes, those awful animated GIFs. Just like JavaScript was until recently, animated GIFs are associated with the ugly web of the past (think dancing hamsters). However, if used carefully, animated GIFs can be used to make a web site very lively and feel more interactive in the same way Flash is used.

To demonstrate this, I've put together probably the most boring proof-of-concept ever. You'll have to use your imagination to see how this technique can be applied in much more creative and better-looking ways.

First, I created a simple animated GIF of a white bar moving left to right over a transparent background. I actually used Flash to create this. In fact, you could take a Flash interface, and publish the different pieces to animated GIFs in order to eliminate the need to use Flash. Anyway, here is my boring GIF on a black background, so that you can see what's happening:

Now, I'm going to use this together with CSS to create an animating hover effect. Here is the CSS and HTML I will use:

<style type="text/css">
/* IE 6 needs a:hover to be defined */
a:hover { width: auto } 

a.shine:hover span {
    /* don't take up space, and appear above the text */
    position: absolute;
    display: block;

    /* set the background to the animated GIF */
    background: url(shine.gif);

    /* the width and height of the animated GIF */
    width: 230px;
    height: 50px;
}
</style>

<a href="/blog/cat/javascript" class="shine">
    <span></span>
    JavaScript
</a>

I'm using an empty span inside the link to act as a placeholder for the animated GIF. When the mouse is hovering over the link, the span comes to life by expanding to an animated GIF which appears above the text. Since the background of the GIF is transparent, and the background of the text is white, the effect is that of a "shine" washing over the text.

Click here to see the code in action.

And there you have it. Yes, I know, my demo is boring. But you have to use your imagination to think of all the amazing things you can do by combining animated GIFs with CSS and even JavaScript effects. You can do something as simple as an animated roll-over image, or as complex as an interactive game. The possibilities are only limited by your ability to design them.


Interested in web development? Subscribe to my newsletter!

Comments

1 . Kel on December 24th, 2006

Kel

Neat - reminds me of when I used to used an animated gif as a fake "loader" in the lowsrc to make it look like something was actually happening while the actual graphic got loaded.

Of course till we see something like the MNG (animated PNG) file format take off, you'll never have any sort of decent transparancy. At it's best dithering, Gif89a still looks clunky 'cuz of the 1 bit transparency.

2 . stephen on December 29th, 2006

stephen

I like it ... because it has potential. In conjunction with the ALA sprite method, this could have some scary results.
Thanks for sharing.

3 . Manoj on April 16th, 2008

Manoj

Cool!!

4 . Tom on November 7th, 2009

Tom

Thanks for the idea, will test this out.

5 . Joe Taylor on December 12nd, 2009

Joe Taylor

Nice one! Great starting point for zillions of uses. Not that I'm looking to see animated .gifs all over web pages again....

6 . Goldie on February 3rd, 2010

Goldie

This seems like an interesting way of creating the effect. Thanks.

7 . maliheh on May 24th, 2010

maliheh

tanks

8 . Emanuele DG on November 23rd, 2010

Emanuele DG

Your post helped me in solving the problem of the classname switch of an element which background has an animated gif through JavaScript: I discovered it was not possible, and your workaround seems to get rid of this limit perfectly.

Thanks a lot!

Comments are closed, but I'd still love to hear your thoughts.