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
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.
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):
The transition-duration CSS property sets the length of time a transition animation should take to complete.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With