Image transition (CSS3) (3/3)

Animated transition between images using CSS3 transitions. This uses even less CPU and is way easier to implement.

by Karl Tayfer

HTML

<div id="box">
    <img id="logo" src="http://www.google.com/logos/1999/googlepump.gif" alt="Google Doodle" />
</div>

CSS

#box {
    background:#000;
    text-align:center;
}
#logo {
    transition:all 1s;
}

JavaScript

/*
 * Image transition (CSS3) (3/3)
 * More at http://jsfiddle.net/user/daPhyre/
 */
window.addEventListener('load', load, false);
var logo = null,
    currentImage = 0,
    images = [
        'http://www.google.com/logos/1999/googlepump.gif',
        'http://www.google.com/logos/1999/turkey_home2.gif',
        'http://www.google.com/logos/1999/snowmanC.gif'];

function load(evt) {
    logo = document.getElementById('logo');
    logo.addEventListener('transitionend', newImage, false);
    setTimeout(darkLogo, 4000);
}

function darkLogo() {
    logo.style.opacity = '0';
}

function newImage() {
    if (logo.style.opacity == '0') {
        currentImage++;
        if (currentImage >= images.length) {
            currentImage = 0;
        }
        logo.src = images[currentImage];
        clearLogo();
        setTimeout(darkLogo, 4000);
    }
}

function clearLogo() {
    logo.style.opacity = '1';
}