Transition not working on Firefox

Question

I'm running this code, by hovering over the image another one appears, and it has a transition code. Weirdly, it doesn't work on FireFox, but works on Opera and Google Chrome. I hoped you could help me, this is my first post.

CSS:

.class1 {
    visibility: visible
}

.class2 {
    background: url(image2); 
    background-repeat: no-repeat; 
    -webkit-transition:all .9s ease; 
    -moz-transition:all .9s ease; 
    -o-transition:all .9s ease; height: 173px
}

.class1:hover .class2 {
    background: url(image1); 
    background-repeat: no-repeat; 
    -webkit-transition:all .7s ease; 
    -moz-transition:all .7s ease; 
    -o-transition:all .7s ease; height: 173px
}

HTML:

<div class="class1" style="width: 280px; float:center">
    <p style="float:center" class="class2">
    </p>
</div>

Doesn't seem to work on Firefox. The image is there and the transition works, on Firefox it works weird, you hover over it and it has no transition, just straight changing image.

Answer 1

If you are using css3 with vendor prefixes you need to add the actual css3 equivalent also, not just the prefixes, they were a stop gap while standards were being adopted.

The latest Firefox has adopted css3 as the standard (No prefixes and no support for them), but the prefixes still support older versions, so it is not wrong to use them but they are only a fall back.

<style type="text/css" media="screen">
.class1 {visibility: visible}
.class2 {
    background: red; 
    background-repeat: no-repeat; 
    -webkit-transition:all .9s ease; 
    -moz-transition:all .9s ease; 
    -o-transition:all .9s ease; 
    transition:all .9s ease; 
    height: 173px}
.class1:hover .class2 {
    background:yellow; 
    background-repeat: no-repeat; 
    -webkit-transition:all .7s ease; 
    -moz-transition:all .7s ease; 
    -o-transition:all .7s ease; 
    transition:all .7s ease; 
    height: 173px
    }
</style>

<div class="class1" style="width: 280px; float:left;"><p style="float:center<class="class2">HJKHKSF</p></div>

I took the images out and used colours.

No further comment: After a little research it appears firefox does not support transition animation on background-images