transform: scale(x,x) doesn't work on animation in Firefox

Question

I'm trying to use a slider to "transform: scale(x,x)" a css3 "animation" in firefox. If I turn off the animation, the slider and scaling works. If I turn on the animation, it animates, but the scaling doesn't work.

Here is my jsfiddle... If you uncomment the end of the CSS, you can see the problem. I want the arrows to spin AND scale.

(FIREFOX ONLY, chrome/safari link below): http://jsfiddle.net/G6rYu/

$("#slider-step").on("change", function(e){
    scale= $("#slider-step").val() / 100;

    $(".elem.A").css("transform", "scale("+scale+","+scale+")");
    $(".elem.B").css("transform", "scale("+(1-scale)+","+(1-scale)+")");
});

and...

.elem.A {  
    background-image:url('http://s24.postimg.org/ua9mzwmht/arrow.png');

    animation-name: rotate; 
    animation-duration: 3.0s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
 }
 @keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(-360deg);} 
}

Here's the effect I'm going for (works in Chrome / Safari only): http://jsfiddle.net/nick2ny/4mLkU/

Answer 1

I think there is a conflict with using transform twice on your .elem elements. The animation transform: rotate() will override transform: scale(). You can use a wrapper element for the scale and apply the animation to the inner element.

You seem to be using zoom in Chrome which can explain why it is working in that browser.

See this fiddle: http://jsfiddle.net/G6rYu/5/ (for Firefox and Chrome)

<div class="wrap">
    <div class="box A">
        <div class="elem A"></div>
    </div>
</div>
<div class="wrap">
    <div class="box B">
        <div class="elem B"></div>
    </div>
</div>

CSS

.wrap {
    width: 175px;
    height: 175px;
    overflow: hidden;
}
.box.A {
    width:175px;
    /* border:1px blue solid; */
}
.box.B {
    position:relative;
    top:0px;
    left:0px;
    float:left;
    height: 175px;
    width:175px;
    /* border:1px blue solid; */
}
.elem {
    width:175px;
    height:175px;
    /* border:1px red solid; */
    background-repeat: no-repeat;
}
.elem.A {
    background-image:url('http://s24.postimg.org/ua9mzwmht/arrow.png');
}
.box.A {
    animation-name: rotate;
    animation-duration: 3.0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}
.elem.B {
    background-image:url('http://s29.postimg.org/np8utnv8j/arrow2.png');
}
.box.B {
    animation-name: rotate2;
    animation-duration: 3.0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate2 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

Answer 2

It works only in WebKit browsers, becuase that's what you're telling CSS to target, for example:

-webkit-animation-name: rotate; 
-webkit-animation-duration: 3.0s; 
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

Firefox is not built with the WebKit engine, so you'll need to target it using the -moz prefix:

/* Target Firefox: */
-moz-animation-name: rotate; 
-moz-animation-duration: 3.0s; 
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;

/* Target Webkit: */
-webkit-animation-name: rotate; 
-webkit-animation-duration: 3.0s; 
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

/* Target W3C Browsers: */
animation-name: rotate; 
animation-duration: 3.0s; 
animation-iteration-count: infinite;
animation-timing-function: linear;