我正在尝试使用滑动条来在Firefox中对CSS3“animation”进行“transform: scale(x,x)”操作。如果关闭动画,则滑块和缩放操作可以正常工作。如果启用动画,则动画效果可以显示,但缩放操作无法正常工作。
这是我的jsfiddle链接... 如果取消CSS结尾处的注释,您可以看到问题所在。我希望箭头既可以旋转又可以缩放。
(仅限Firefox,chrome / safari链接如下): http://jsfiddle.net/G6rYu/
这是我想要达到的效果(仅适用于Chrome/Safari浏览器):http://jsfiddle.net/nick2ny/4mLkU/
这是我的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/
transform: rotate()
时,它应该只会覆盖第一个transform: scale()
。对于 Chrome,你可以使用缩放来避免冲突,我猜测。 - Mathias