CSS3 Animations and best performance on mobile

Question

I am making an app and realised that it is best to hardware accelerate animations.

I wanted to use jQuery animate enhanced, which works but I feel I want a better grasp on the whole idea of hardware acceleration:

When moving a div using top/left positioning for example using jQuery, will it automatically be hardware accelerated by adding transform: translate3d(0, 0, 0); ?

Will this hardware accelerate anything? Also, what about animation keyframes? Will you need to add a transform to an animation for it to be hardware accelerated?

Answer 1

Paul Irish wrote a great, in-depth breakdown of this very thing.

Usually 3d translation will trigger the GPU, if it doesn't, it's no big deal, it still works. Using translate over left/top coordinates is usually better performance-wise as well. I'm not sure about the animation keyframes part of the question though.