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

Question

我正在尝试使用滑块在 Firefox 中“转换：缩放（x，x）”一个 css3“动画”。如果我关闭动画，滑块和缩放工作。如果我打开动画，它会动画，但缩放不起作用。

这是我的 jsfiddle... 如果您取消注释 CSS 的末尾，您可以看到问题。我希望箭头旋转和缩放。

（仅限 FIREFOX，下面是 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

它仅适用于 WebKit 浏览器，因为这就是您告诉 CSS 的目标，例如：

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

Firefox 不是使用 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;

Answer 2

我认为在您的 .elem 元素上使用两次转换存在冲突。动画transform: rotate() 将覆盖transform: scale()。您可以使用包装元素进行缩放并将动画应用到内部元素。

您似乎在 Chrome 中使用 zoom，这可以解释为什么它在该浏览器中有效。

查看这个小提琴：http://jsfiddle.net/G6rYu/5/（适用于 Firefox 和 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);
    }
}