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

css css-transitions css-transforms
JackMahoney picture JackMahoney · Nov 16, 2012 · Viewed 34.9k times · Source

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

Answer

Philipp Kühn picture Philipp Kühn · Jan 17, 2013

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

Related questions

Prevent flicker on webkit-transition of webkit-transform

Possible Duplicate: iphone webkit css animations cause flicker For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker. Here is what I am doing: CSS: #element { -webkit-transition: -webkit-transform 500ms; } JavaScript: $("#element").css("-webkit-transform", "…

Read More
Spin or rotate an image on hover

I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code :

Read More
Hover effect : expand bottom border

I'm trying to get a transition hover effect on border that the border expands on hover. I've tried this on Jsfiddle

Read More