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

Posted by JackMahoney on Stack Overflow See other posts from Stack Overflow or by JackMahoney
Published on 2012-11-16T04:56:56Z Indexed on 2012/11/16 4:59 UTC
Read the original article Hit count: 381

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

© Stack Overflow or respective owner

Related posts about css

Related posts about css3