Animation element rotation

Question

How would I rotate an element using jQuery .animate() ? I use the line below, which currently animates opacity correctly, but does it support CSS3?

 $(element).animate({ opacity: 0.25, MozTransform: 'rotate(-' + -amount + 'deg)', transform: 'rotate(' + -amount + 'deg)' }); 

Answer 1

As far as I know, basic animated objects cannot animate non-numeric CSS properties.

I believe that you can do this with step and the corresponding css3 conversion for users browser. CSS3 transformation is a bit complicated to cover all your browsers (e.g. IE6 you need to use the Matrix filter).

EDIT : here is an example that works in webkit browsers (Chrome, Safari): http://jsfiddle.net/ryleyb/ERRmd/ p>

If you want to support only IE9, you can use transform instead of -webkit-transform , or -moz-transform will support FireFox.

The trick used is to animate a CSS property that we don’t care about ( text-indent ), and then use its value in the step function to perform the rotation:

 $('#foo').animate( .. step: function(now,fx) { $(this).css('-webkit-transform','rotate('+now+'deg)'); } ... 

Answer 2

The answer to Ryley is excellent, but I have text inside the element. To rotate the text along with everything else, I used the border-spacing property instead of text-indent.

In addition, to clarify the bit, in the style of the element, set the initial value:

 #foo { border-spacing: 0px; } 

Then in the animation fragment your final value is:

 $('#foo').animate({ borderSpacing: -90 }, { step: function(now,fx) { $(this).css('transform','rotate('+now+'deg)'); }, duration:'slow' },'linear'); 

In my case, it rotates 90 degrees counterclockwise.

Here is a live demo .

Answer 3

In my opinion, jQuery animate slightly overestimated compared to the CSS3 transition , which performs such animation on any 2D or 3D property. I’m also afraid that leaving it in the browser and forgetting the layer with the JavaScript name may lead to a spare processor juice - especially when you want to blow up the animation. So I like animations that define style definitions, since you define functionality with JavaScript . The more presentations you enter in JavaScript, the more problems you will encounter later.

All you have to do is use addClass for the element you want to animate, where you set the class with CSS transition properties. You simply “activate” the animation , which remains implemented at a pure level of presentation .

.js

 // with jQuery $("#element").addClass("Animate"); // without jQuery library document.getElementById("element").className += "Animate"; 

You can easily remove a class with jQuery or delete a class without a library .

.css

 #element{ color : white; } #element.Animate{ transition : .4s linear; color : red; /** * Not that ugly as the JavaScript approach. * Easy to maintain, the most portable solution. */ -webkit-transform : rotate(90deg); } 

.html

 <span id="element"> Text </span> 

This is a quick and convenient solution for most use cases.

I also use this when I want to implement a different style (alternative CSS properties) and want to change the style on the fly using global .5s animation. I am adding a new class to BODY , having alternative CSS in a form like this:

.js

 $("BODY").addClass("Alternative"); 

.css

 BODY.Alternative #element{ color : blue; transition : .5s linear; } 

This way you can apply different styles with animation without loading different CSS files. You use JavaScript only to set the class .

Answer 4

To add Ryley and atonyc to the answers, you don't actually need to use a real CSS property like text-index or border-spacing , but instead you can specify a fake CSS property like rotation or my-awesome-property . It might be a good idea to use something that doesn't risk becoming an actual CSS property in the future.

In addition, someone asked how to animate other things at the same time. This can be done as usual, but remember that the step function is called for each animated property, so you will need to check your property, for example:

 $('#foo').animate( { opacity: 0.5, width: "100px", height: "100px", myRotationProperty: 45 }, { step: function(now, tween) { if (tween.prop === "myRotationProperty") { $(this).css('-webkit-transform','rotate('+now+'deg)'); $(this).css('-moz-transform','rotate('+now+'deg)'); // add Opera, MS etc. variants $(this).css('transform','rotate('+now+'deg)'); } } }); 

(Note: I can’t find the documentation for the “Tween” object in the jQuery documentation, from the animation document page, link to http://api.jquery.com/Types#Tween , which is not a section that does not exist. You can find the Tween prototype code on Github here ).

Answer 5

Just use CSS transitions:

 $(element).css( { transition: "transform 0.5s", transform: "rotate(" + amount + "deg)" } ); setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 ); 

As an example, I set the animation duration to 0.5 seconds.

Pay attention to setTimeout to remove the transition css property after the animation finishes (500 ms)

---

For readability, I have omitted vendor prefixes.

This solution requires browser transition support.

Answer 6

I stumbled upon this post, hoping to use CSS to jQuery transforms to animate an infinite loop. This worked great for me. I don’t know how professional it is.

 function progressAnim(e) { var ang = 0; setInterval(function () { ang += 3; e.css({'transition': 'all 0.01s linear', 'transform': 'rotate(' + ang + 'deg)'}); }, 10); } 

Usage example:

 var animated = $('#elem'); progressAnim(animated) 

Answer 7

 //this should allow you to replica an animation effect for any css property, even //properties //that transform animation jQuery plugins do not allow function twistMyElem(){ var ball = $('#form'); document.getElementById('form').style.zIndex = 1; ball.animate({ zIndex : 360},{ step: function(now,fx){ ball.css("transform","rotateY(" + now + "deg)"); },duration:3000 }, 'linear'); }