Question

这就是我想要的，我需要扩展和移动！一个对象同时，现在我有这样的东西：

element.addClass('scale').animate({
     top:  pxToMove.top+"px",
     left: pxToMove.left+"px"
},1000});

，比例等级如下：

-webkit-transform: scaleX(1.8) scaleY(1.8);
-o-transform: scaleX(1.8) scaleY(1.8);
-moz-transform: scaleX(1.8) scaleY(1.8);
transform: scaleX(1.8) scaleY(1.8);

首先进行缩放然后对象移动，我该如何同时进行缩放？

Answer 1

你也可以这样做一个纯粹的css解决方案：

CSS：

@keyframes scale-move {
  0%   { transform: translate(0,0) scale(1,1); }
  100% { transform: translate(500px,250px) scale(5,5); }
}

#move {
  animation: scale-move 10s infinite;
}

Fiddle Me This... （不是供应商前缀......仅在FF工作）

Answer 2

不遗余力地重新发明轮子并利用已经编写的库; jQuery transit。你可以将CSS3动画几乎任何属性！： - ）

这很简单：

element.transition({top: pxToMove.top, left: pxToMove.left, scale:1.8}, 1000);

当然，这适用于您在网站上制作大量内容的动画;包括只用于一个动画的那个库就被过度杀死了。但就今天的网站而言，您最有可能不止一次使用它。

用scaleX和scaleY动画css3动画？

2 个答案: