Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 951
JackMahoney Avatar asked Nov 16 '12 04:11

JackMahoney


People also ask

What is the difference between transform and transition in CSS?

So, what's the difference between CSS Transform and CSS Transition? The Transform property in CSS moves or modifies the appearance of an element, whereas the Transition property seamlessly and gently transitions the element from one state to another.

Why is it better to use translate () rather than an Position absolute top right bottom left?

TLDR: Using transform: translate(x,y); greatly decreases paint times on elements with CSS transitions. However, position: absolute; top/left will be faster if used on elements without transitions. Why Moving Elements with translate is better than position absolute, top/left (Paul Irish):

Which CSS property can be used to specify the amount of time over which a transition takes?

The transition-duration CSS property sets the length of time a transition animation should take to complete.

How are transformations and transitions effected in CSS?

linear - specifies a transition effect with the same speed from start to end. ease-in - specifies a transition effect with a slow start. ease-out - specifies a transition effect with a slow end. ease-in-out - specifies a transition effect with a slow start and end.


1 Answers

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

like image 109
Philipp Kühn Avatar answered Oct 19 '22 00:10

Philipp Kühn