multiple transform animations in jQuery


I have a 2 part question:

1 . how can I animate in jQuery multiple transformation (such as scale() + rotate()) simultaneously on click?

(I've tried using the step function like this:

$("target").animate({'left':'100px',myScaleProperty: 2, myRotationPreperty: 180}, {step: function(now,tween) {
if (tween.prop == myScaleProperty) {
if (tween.prop == myRotationProperty){

2 . how can I make a reversible animation on jQuery (without defining another reverse animation function)?

Problem courtesy of: Yoti


I've a blog post showing how to scale and rotate at the same time

here is the fiddle

having such css you can use jquery to add the animation class or remove it

transform:rotate(180deg) scale(0.5);

in jquery javascript it might look like this

 $(this).css({transform:'rotate(180deg) scale(0.5)'})

UPDATE: replace infinite transition animation loop with single trigger-based transform

Solution courtesy of: muayyad alsadi


There is currently no discussion for this recipe.

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