问题
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.
回答1:
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?
回答2:
The consensus I've gathered is that only the translate3d property is hardware accelerated on mobile devices such as Mobile Safari.
Further Reading.
来源：https://stackoverflow.com/questions/9661876/css-is-transition-left-top-gpu-accelerated