You can take advantage of hardware accelerated animations by setting an animation duration and setting the initial and final values of the CSS3 transform.

What if, instead of setting an animation duration and using keyframes, you animate the value of the desired CSS3 transform directly with JavaScript? Will you still be taking advantage of hardware acceleration, or is the hardware acceleration ruled out?

You can take advantage of hardware accelerated animations by setting an animation duration and setting the initial and final values of the CSS3 transform.

What if, instead of setting an animation duration and using keyframes, you animate the value of the desired CSS3 transform directly with JavaScript? Will you still be taking advantage of hardware acceleration, or is the hardware acceleration ruled out?

• javascript
• animation
• css
• jquery-animate

• 1 Analysis on why jQuery way is slower than CSS: css3.bradshawenterprises./demos/speed.php . The jQuery version doesn't even animate on my dual core CPU when there's too many blocks! – JoJo Commented Jan 15, 2012 at 18:07

2 Answers 2

It won't be hardware accelerated for webkit browsers unless you use transitions. Also, only 3d transforms are accelerated, so a quick way to ensure that the element is going to use the 3d rendering tree if it's avaliable is to add:

-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

The reason transforms are quick by the way, is because by definition they don't affect any other elements - this means the browser doesn't need to repaint the whole window, just the part that's being transformed.

The old way of animating should really be considered obsolete, as it is much less efficient than transitions, and generally has a lower framerate, particularly on iOS.

It is hardware accelerated, but as Rich mentions, it's easier and more efficient to do it with CSS transitions. The thing is that animating 3d transforms with jQuery is not straightforward, if you do:

$('div').animate({
    '-vendor-transform' : "translate3d(100px,0,0)";
}, 500)

It doesn't work. Even if you do:

$('div').css("-webkit-transform", "translate3d(0,0,0)");
alert($('div').css("-webkit-transform"))

You don't get back translate3d(0,0,0), you get matrix(1, 0, 0, 1, 100, 0)

So you must write a lot of custom animation code involving matrices just to get things moving on screen.

Here is a custom animated 3d transform example: http://www.eleqtriq./wp-content/static/demos/2010/rotation/, take a look at the source code to see if it's the level of javascript you are fortable with.