transform: scale(x，x)不适用于Firefox中的动画

Question

我试图使用一个滑块来“转换:缩放(x，x)”css3“动画”在火狐。如果我关闭动画，滑块和缩放工作。如果我打开动画，它会动，但是缩放不起作用。

这是我的小提琴..。如果取消对CSS结尾的注释，就会发现问题所在。我想要箭头旋转和缩放。

(仅火狐浏览器，下面的chrome/safari链接)：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)+")");
});

还有..。

.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);} 
}

这是我想要达到的效果(只在Chrome / Safari中工作)：http://jsfiddle.net/nick2ny/4mLkU/

Answer 1

我认为在.elem元素上使用transform两次是有冲突的。动画transform: rotate()将覆盖transform: scale()。您可以为缩放使用包装元素，并将动画应用于内部元素。

你似乎在使用Chrome中的zoom，这可以解释为什么它在那个浏览器中工作。

看这个小提琴：http://jsfiddle.net/G6rYu/5/ (火狐和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

它只在WebKit浏览器中工作，因为这就是您告诉CSS要针对的内容，例如：

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

火狐不是用WebKit引擎构建的，所以您需要使用-moz前缀来定位它：

/* 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;