Does animating the value of a CSS3 transform with javascript rule out hardware acceleration?

Question

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?

Answer 1

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.com/wp-content/static/demos/2010/rotation/, take a look at the source code to see if it's the level of javascript you are comfortable with.

Answer 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.