CSS3用scaleX和scaleY设置动画吗？

Question

Well here what i want, i need to scale and move! an object at the same time, now i have something like this:

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

and the scale class goes like:

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

So first the scaling is happening and then the object moves, how can i do them simultaneously?

Answer 1

you can also do a pure css solution as such:

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... (Not vendor prefixed... working in FF only ATM)

Answer 2

Spare yourself for re-inventing the wheel and take advantage of a already-written library; jQuery transit . You can CSS3 animate pretty much any property! :-)

It's as easy as:

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

Of course this applies if you are animating a lot of stuff on your site; including that piece of library for just one animation is over-kill. But as of sites today, you are most likely to use it more than once.