http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html
http://stackoverflow.com/questions//what-does-webkit-transform-translate3d0-0-0-exactly-do-apply-to-body
-webkit-transform: translate3d(0,0,0); makes some devices run their hardware acceleration.
A good read is found Here
Native applications can access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.
Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).
Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x, y and z axis. It’s only a technique to force the hardware acceleration.
An alternative is -webkit-transform: translateZ(0). And If there’s flickering on Chrome and Safari due to transforms, try -webkit-backface-visibility: hidden and -webkit-perspective: 1000. For more info refer to this article.
#
Ever notice an odd flicker within WebKit-powered desktop and mobile browsers, or simply want to use hardware acceleration of a given device? There’s a really neat trick you can use to force hardware acceleration!
The WebKit CSS
/* warp speed ahead */
.animClass {
-webkit-transform: translate3d(0, 0, 0);
/* more specific animation properties here */
}
The use of translate3d pushes CSS animations into hardware acceleration. Even if you’re looking to do a basic 2d translation, use translate3d for more power! If your animation is still flickering after switching to the transform above, you can use a few little-known CSS properties to try to fix the problem:
.animClass {
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
There you have it; more power, less flicker. Happy animating!
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/211919.html原文链接：https://javaforall.net
