CSS Unused CSS Stages Transitions and Transforms 2D Transforms

Andrew Stelmach
Andrew Stelmach
12,377 Points

Better PERFORMANCE by using transform: translate(); but is it better than using positioning properties overall?

The video says we get better performance by using transform: translate(); properties, but is it less fiddly and/or problematic than using positioning properties?

If I just want to change the position of an element, is it easier to use a transform or a position property?

7 Answers

David Hope
David Hope
19,876 Points

Okay, here are just a few pieces of information which may be able to help answer your question. You might want to check the W3C for an even more in depth answer or by using your search engine of choice to find the answer you're looking for. I wish you the best of luck!

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/#position-property

http://alistapart.com/article/css-positioning-101

http://learn.shayhowe.com/advanced-html-css/transitions-animations/

David Hope
David Hope
19,876 Points

That depends on what your desired result is. If you want your element to have any sort of animation or movement on the screen, then using the transform: translate(); properties is your best bet. For elements which there will be no animation or movement, then using a position property is the better option. I hope this explanation helps you out Andrew!

Andrew Stelmach
Andrew Stelmach
12,377 Points

Thanks, but why is it better?

David Hope
David Hope
19,876 Points

No problem, here's why: In regards to transform: translate() properties for animation or movement, it's because they trigger hardware acceleration on the users computer, as explained by Guil in this excellent blog post http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css.

Andrew Stelmach
Andrew Stelmach
12,377 Points

Thanks, but I was referring to the question of whether it's more or less 'fiddly' or problematic (in terms of coding, page layout, responsive design etc) than using positioning properties.

Andrew Stelmach
Andrew Stelmach
12,377 Points

Treehouse is asking me to select a 'best answer', but no-one has actually answered my question yet!?

Andrew Stelmach
Andrew Stelmach
12,377 Points

Thanks, David. That helps a lot.