transform:translateX vs transition on left property. Which has better performance? CSS

Question

I'm making a slide out menu with HTML and CSS3 - especially transitions.

I would like to know what is best practice / best performance to slide a relatively positioned div horizontally. When i click a button it adds a class to my div. Which class is better? (Note I can add all the browser prefixes later and this site only targets modern browsers).

//option 1
.animate{
    -webkit-transition:all ease 0.3s;
    -webkit-transform:translateZ(200px);
}

//option 2
.animate{
    -webkit-transition:all ease 0.3s;
    left:200px;
}

Thanks

Solution 1

Transitions via translate performs MUCH better on mobile devices!

Edit: Here are a live demo. Transitions with translateX and translateY are much smoother than top, bottom, left and right. jsFiddle Demo for mobile devices

Solution 2

translateX and translateY is much smoother than left, right, top, bottom and jQuery animate versions. See this for much deeper details with demo:

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Comments

[john-jones]

blog.alexmaccaw.com/css-transitions

[JackMahoney]

Any tests or articles for this?

[Philipp Kühn]

I'm building a webapp for the iPad at the moment. And the performance with translateX and translateY is MUCH better than with left, right, top and bottom. But If you build it only for desktop browsers you will see no difference. And there is another difference. if you animate to left: 100% the element will be animated to 100% of the parents width. And if you animate translateX(100%) the element will be animated to 100% of the own width. I haven't any tests or articles at the moment - just my experience ;) but i will prepare a jsFiddle today...

[Philipp Kühn]

Here look at this. just hover (or click on mobile) on the left an right side. the translateY transitions are much smoother on my iPad 3. jsfiddle.net/philippkuehn/wLm87

[David Faure]

just add a case now. transform is way better than transition for performance on the iphone

[agm1984]

The fiddle in this answer just made me realize that my translateX wasn't working because I had position: absolute; on.