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