CSS3 performance? animate left or translateX

Problem

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?

Problem courtesy of: davivid

Solution

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/

Solution courtesy of: meo

Discussion

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.

Discussion courtesy of: Michael Mullany

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/

Discussion courtesy of: Ridcully

This recipe can be found in it's original form on Stack Over Flow.