CODEWITHSUNDEEP
csswebkitcss-transitions
Alex Matchneer
Alex Matchneer

Reputation: 3309

CSS: is transition: left/top GPU accelerated?

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.

Upvotes: 7

Views: 9558

Answers (2)

trusktr
trusktr

Reputation: 45464

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?

Upvotes: 6

alex
alex

Reputation: 490183

The consensus I've gathered is that only the translate3d property is hardware accelerated on mobile devices such as Mobile Safari.

Further Reading.

Upvotes: 1

Related Questions