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

Question

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!

Answer 1

Can be done with pseudo elements.

.logo {
    background: url(http://via.placeholder.com/300?text=Normal) no-repeat;
    width: 300px;
    height: 300px;
    position: relative;
}
.logo:after {
    content: "";
    opacity: 0;
    display:block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(http://via.placeholder.com/300?text=Hover) no-repeat;
    -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:after {
    opacity: 1;
}

https://jsfiddle.net/84bvybjs/

Answer 2

just change the ease to ease-in-out like this

-moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;

demo: http://jsfiddle.net/kYZ9Y/4/

for more Easing Functions go to http://easings.net/

the markup :

<div class="logo"></div>

the style :

.logo {
    float: left;
    z-index: 1;
    width: 300px;
    height: 225px;
    background: url(http://pixellab-design.com/img/1.jpg) no-repeat;
    position: absolute;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.logo:hover {
    z-index: 2;
    opacity: 1;
    background: url(http://pixellab-design.com/img/2.jpg) no-repeat;
}

Answer 3

At least for Firefox, as per the documentation, background-image is not animatable.

Instead, try putting both images one on top of each other and animating the opacity property:

.logo {
    float: left;
    z-index: 1;
    width: 300px;
    height: 225px;
    background: url(http://pixellab-design.com/img/2.jpg) no-repeat;
    position: absolute;
}

.logotop {
    float: left;
    z-index: 2;
    width: 300px;
    height: 225px;
    background: url(http://pixellab-design.com/img/1.jpg) 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;
}

.logotop:hover {
    opacity: 0;
}

HTML:

<div class="logo"></div><div class="logotop"></div>

Fiddle: http://jsfiddle.net/kYZ9Y/2/