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