CSS3 performance? animate on the left or translateX

Question

In the HTML5 / CSS3 demo I'm doing, I use CSS transitions mainly to speed up performance.

I was wondering for my interface - where is jQuery currently controlling the LEFT attribute of the Div container based on the mouse position, for example, instead use transform: translateX(tx) instead? or does jquery do it automatically if the browser supports it?

Answer 1

jquery does not use transform: translateX (tx). You must do it manually. But this is good practice for this, because it is actually much faster.

http://jsfiddle.net/MZBtr/2/

You can use Mondernizr to discover features, and then decide what to do according to the result.

Here is a demo demonstrating this: http://jsfiddle.net/zWavD/1/

Answer 2

Ben Barnett has a jquery extension that improves jquery to animate certain properties (on the left is one of them) using CSS3.

http://www.benbarnett.net/2010/09/01/enhancing-jquerys-animate-function-to-automatically-use-css3-transitions/

Answer 3

JQuery animation animates the properties you pass to them, it does not try to guess the list of properties (as far as I know)

The only reason to use streaming rather than jQuery animations is if you care about better performance on iPad and iPhone. CSS transformations are offloaded on these devices (as long as you use translate3d, not translate2d), and soon they will be on other mobile devices such as Android), as well as desktop browsers such as Chrome and Safari.