Skip to content Skip to sidebar Skip to footer

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 o

Solution 1:

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 2:

Solution 3:

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.

Post a Comment for "Css3 Performance? Animate Left Or Translatex"