Animated Image with Javascript

Stackoverflow used this technique for its unicorn animations last april fools day. I preserved the animations on my website. The animation code is my own - I didn't look at how stackoverflow was doing it.

The concept is to create a sprite, and then change the background position on an interval.

_{(source: jumpingfishes.com)}

#animation {
    background-image: url(charging.png);
    background-repeat: no-repeat;
    height: 102px;
    width: 140px;
}

function startAnimation() {
    var frameHeight = 102;
    var frames = 15;
    var frame = 0;
    var div = document.getElementById("animation");
    setInterval(function () {
        var frameOffset = (++frame % frames) * -frameHeight;
        div.style.backgroundPosition = "0px " + frameOffset + "px";
    }, 100);
}

Working demo: http://jsfiddle.net/twTab/

Edit: If you don't want to create a sprite, here's an alternate technique you can use. Put all of your animation frame images in a div and hide all but the first one. In your setInterval function, move the first image to the end of the list:

#animation img {
    display: none;
}
#animation img:first-child {
    display: block;
}

<div id="animation">
    <img src="charging01.png />
    <img src="charging02.png />
    <img src="charging03.png />
    ...
</div>

function startAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0;
    setInterval(function () { 
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
    }, 100);
}

Working demo: http://jsfiddle.net/twTab/3/

You can use setInterval or setTimeout to call a function which would replace the source of an image with another. Giving it an animated look.

The problem in this case is that, if the images do not pre-exist on the page, they will flicker. Since the browser will have to load them in just like any other image. So you would have to preload your images.

A better solution may be to use a spritemap. This means that you would have all of the different steps of the animation in one image (so no flicker). You would then use the CSS background-position (again, within a setInterval or setTimeout function) to change the position of the image.