CSS3 image transition

Animated transition between two images using CSS3 transition property and a little Javascript

by Karl Tayfer

HTML

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

CSS

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

JavaScript

window.addEventListener('load',load,false);
var btn=null,logo=null;

function load(evt){
    btn=document.getElementById('btn');
    logo=document.getElementById('logo'); btn.addEventListener('mousedown',darkLogo,false);
    logo.addEventListener('transitionend',newLogo,false);
}

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

function newLogo(evt){
    if(logo.style.opacity=='0'){
        logo.src='http://www.google.com/logos/1999/turkey_home2.gif';
        logo.style.opacity='1';
    }
}