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.