CSS3 performance? animate left or translateX

In a HTML5 / CSS3 Demo I am making, Im using CSS transitions mostly to speed up the performance.

I was wondering for my UI - where currently JQuery manipulates the LEFT attribute 开发者_开发知识库of a container Div based on mouse position for example, should I instead use transform: translateX(tx) instead? or does JQuery do this automatically if the browser supports it?

jquery does not use transform: translateX(tx) instead. You have to do it manualy. But its a good practice to do this, because its actually much faster.

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

You could use Mondernizr for feature detection and then decide what to do according to the result.

Here a demo that demonstrates it: http://jsfiddle.net/zWavD/1/

There is a jquery extension by Ben Barnett, that enhances jquery to animate certain properties (left is one of them) using CSS3.

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

JQuery animation animates the properties that you hand it, it doesn't try to second guess the property list (to the best of my knowledge)

The only reason to use translation rather than JQuery animations is if you care about the best performance on iPad and iPhone. CSS transforms are GPU-offloaded on these devices (as long as you use the translate3d, not translate2d), and they soon will be on other mobile devices like Android) as well as desktop browsers like Chrome and Safari.