CSS3 transition doesn't work in Firefox, Safari and IE

CSS3 transition doesn't work in Firefox, Safari and IE

I was playing with image swap hover effect with CSS3 transitions.
Unfortunately, it only works in Chrome. I have seen lots of examples from
CSS3 transition that works flawless in Chrome, Firefox and Safari, but not
this time... :( Where is the problem?
http://jsfiddle.net/kYZ9Y/
.logo {
float: left;
z-index: 1;
width: 325px;
height: 73px;
background: url(../img/logo.png) no-repeat;
position: absolute;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logo:hover {
z-index: 2;
opacity: 1;
background: url(../img/logo1.png) no-repeat;
}
Cheers!