在Firefox中，动画中的transform: scale(x,x)无法正常工作。

Question

我正在尝试使用滑动条来在Firefox中对CSS3“animation”进行“transform: scale(x,x)”操作。如果关闭动画，则滑块和缩放操作可以正常工作。如果启用动画，则动画效果可以显示，但缩放操作无法正常工作。

这是我的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/

- Nick

---

你确定可以在单个元素上使用多个变换吗？当你应用 transform: rotate() 时，它应该只会覆盖第一个 transform: scale()。对于 Chrome，你可以使用缩放来避免冲突，我猜测。 - Mathias

我认为你可能是对的。我将尝试使用webkit和无前缀的css3，并像你建议的那样使用包装器。然后我会像巴斯蒂安建议的那样优化一切。 - Nick

Ta-DA！谢谢大家。我转换了盒子的包装... http://jsfiddle.net/nick2ny/G6rYu/18/ - Nick

Answer 1

这只在 WebKit 浏览器中有效，因为你告诉 CSS 目标是 WebKit 浏览器，例如：

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

- BenM

---

他可能没有包含前缀，但是他将两个转换应用于一个类，这样会不会有问题，因为它们会相互抵消？ - Dan

这是另一个问题，但他指出它在Chrome / Safari中可以工作而在Mozilla中不能... - BenM

他在Chrome中使用另一种CSS方法进行缩放，即“缩放”。 - Mathias

我正在使用平板电脑，所以无法真正检查跨浏览器等问题，但也许这可以通过合并前缀和更改转换问题来解决：http://jsfiddle.net/G6rYu/4/。 - Dan

Answer 2

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

您似乎在Chrome中使用了zoom，这可能是它在该浏览器中工作的原因。

请参见此fiddle：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);
    }
}

- Mathias

---

嗨，马蒂亚斯 - 我认为你是对的。不过你的 JSFiddle 没有起作用，可惜。它说那里没有 "fiddle"。谢谢你的帮助，我会尝试一下。 - Nick