• Using Animated GIFs with CSS

    Dec 23 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.

  • Comments

    1. Kel at 12:46am on December 24, 2006

    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 at 7:40am on December 29, 2006

    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 at 2:00pm on April 16, 2008

    Cool!!

    4. Tom at 5:29am on November 7, 2009

    Thanks for the idea, will test this out.

    5. Joe Taylor at 10:21pm on December 12, 2009

    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 at 10:35am on February 3, 2010

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

    7. maliheh at 8:07am on May 24, 2010

    tanks

    8. Emanuele DG at 9:31am on November 23, 2010

    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!

    Commenting is now closed. Come find me on Twitter.