css transitions not working on firefox

Question

I have a similar issue as CSS Transition not firing when adding class to body (Firefox) but I can seem to find a way to solve it targeting the element in different ways or removing classes.

Here is what I have:

Markup:

                <div class="ball b40 first">
                    <a class="ffx-fx" href="javascript:void(0)">

                    </a>
                </div>

css:

.ffx-fx {
-webkit-transition: all 1.5s ease-in-out; 
   -moz-transition: all 1.5s ease-in-out;
     -o-transition: all 1.5s ease-in-out;
    -ms-transition: all 1.5s ease-in-out;
        transition: all 1.5s ease-in-out;
}
.b40 a          {
width:220px;
height:220px; 
background: url(../images/temp/1_a.jpg) center center; 
background-size: 100% 100% !important;

}

.b40 .b40-rotated {
width:220px;
height:220px; 
background: url(../images/temp/1_b.jpg) center center !important;

}

js:

window.setInterval(function() {
   $( ".b40 .ffx-fx" ).toggleClass( "b40-rotated" );
}, 5000);

So what is supposed to happen, the transitions seem to be set on a different element than the one you're changing the class on. Does it work in other browsers ? — adeneo, Dec 02 '14 at 23:47
You can't transition between background images. You can stack background images and change the opacity, however. [Here is a handy list of Properties that can be animated.](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties) — misterManSam, Dec 03 '14 at 00:22

cbloss793 · Answer 1 · 2014-12-03T01:06:12.943

I don't believe you can switch out background-images with transitions. At least I haven't tried it. How I usually handle this situation is have two inner divs--one with the on hover class and one with the off class. Then on hover, I change opacity. Opacity transition works. Sooo something like this...

HTML

<div class="container">
  <a href="">
   <div class="off_state"></div>
   <div class="on_state"></div>
 </a>
</div>

CSS

.container{position:relative;}
.off_state, .on_state{
    position:absolute;
    top:0;
    left:0;
    transition: all 1s;
}
.off_state, .container:hover .on_state{opacity:0.0;filter:alpha(opacity=0);}
.container:hover .on_state{opacity:1.0;filter:alpha(opacity=100);}

It's a rough version, but that's how I've always done it.

NOTE: jQuery UI also has the ability to add a class slowly. You can view it here: http://jqueryui.com/addClass/. It would probably be easier to use.

css transitions not working on firefox

1 Answers1