变换：scale（x，x）在Firefox中的动画不起作用

Question

我试图在Firefox中使用滑块来“变换：scale（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

我觉得这是用你的.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); 
    } 
} 

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;