Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS: is transition: left/top GPU accelerated?

CSS: is transition: left/top GPU accelerated?

Problem

I know that you can force GPU acceleration to achieve smooth animation of elements across the screen by applying a transition to the 'transform' property, e.g.:

elem.style.transition = 'all 3s ease-out';
elem.style.transform = 'translateX(600px)';

But I was wondering what would happen if you replaced the second line with:

elem.style.left = '600px'; 

Would/could GPU acceleration kick in for the "left" (or "top") property, or does it have to be on the transform property? It seems to me that it should be GPU accelerate-able, but I can't glean a final answer from any of the documentation I've read.

Problem courtesy of: Alexander Wallace Matchneer

Solution

It's not accelerated. You have to use the specific CSS3 properties for it to be accelerateable. I think you'll find these links interesting:

http://www.html5rocks.com/en/tutorials/speed/html5/

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

Does animating the value of a CSS3 transform with javascript rule out hardware acceleration?

Solution courtesy of: trusktr

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS: is transition: left/top GPU accelerated?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×