Firefox: Background-Image Transition over Div Elements won't work

Question

Just watch this in Firefox and in Chrome. http://jsfiddle.net/TBwXm/

        div#back {
        background: url('http://dummy-images.com/abstract/dummy-250x250-Rope.jpg');
        width: 250px; height: 250px;
           -ms-transition: all 1.5s ease 0;
          -moz-transition: all 1.5s ease-in-out;
          -webkit-transition: all 1.5s ease 0;
          -o-transition: all 1.5s ease 0;
        transition: all 1.5s ease-out 0;
    }
    div#back:hover { 
background:url('http://dummy-images.com/abstract/dummy-250x250-Floral.jpg'); }

I've tried several things, like Why is my CSS3 Transition not working in Firefox? or Why does this CSS hover transition fail in FireFox?

The included demo of the last link works on FF, I copied the source code and tried it with my div, but nothing happens.

Does someone know what's going on?

Thanks!

Answer 1

I can achieve it with a trick (found here in SO).

Demo JsFiddle

If we cant do it directly, we are going to use a state between the start and the end of the animation. In this state, just play with opacity and z-index.

div#back {
    position: relative;
    width: 250px; height: 250px;
}

#back:before, #back:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 1;
}

#back:before {
    background-image: url('http://dummy-images.com/abstract/dummy-250x250-Rope.jpg');
    z-index: -1;
    transition: opacity 2s ease;
}

#back:after {
    background-image: url('http://dummy-images.com/abstract/dummy-250x250-Floral.jpg');
    z-index: -2;
}

#back:hover:before {
    opacity: 0;
}