CODEWITHSUNDEEP
csscss-transitionscss-transforms
JackMahoney
JackMahoney

Reputation: 3433

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

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

Upvotes: 24

Views: 42677

Answers (2)

Yogesh Yadav
Yogesh Yadav

Reputation: 41

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/

Upvotes: 4

Philipp Kühn
Philipp Kühn

Reputation: 1649

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

Upvotes: 23

Related Questions