left vs translateX in CSS3 Animations

Question

I have created this fiddle ; The red box animates with CSS left property, and the blue one animates with CSS Transform TranslateX property.

In Chrome 21, Both animations have the same performace, both running smoothly.

But in Safari (for Windows), the blue one animates smoothly, but the red one is laggy. (Seems that the blue one is hardware-accelerated, while the red one not)

The first question is, What is the best choice? Which one is better at overall? (support by more browsers, etc.)

And next, Isn't there any way to Hardware-accelerate animations on left and top CSS properties in Safari? (Since I want to actually move a div to outside of window, I think using left property is better.)

Answer 1

Translate is there to move objects around without affecting there position in the DOM. Although it visibly moves to another place on the screen the DOM is not affect. This is why the performance of the translate function generally is better.

Be warned that you will not see the same performance characteristics in every browser.

This is a JSPerf overview of the different translate/move functions. Scroll to the bottom to see the statistics per browser.

It will most likely change in the future.