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.
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:
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here