css3 animate with scaleX and scaleY?


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

     top:  pxToMove.top+"px",
     left: pxToMove.left+"px"

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?

Problem courtesy of: user3299182


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.

Solution courtesy of: Eric


you can also do a pure css solution as such:


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

Discussion courtesy of: Phlume

This recipe can be found in it's original form on Stack Over Flow.