translate加速计算_使用translate3d在WebKit中强制进行硬件加速

translate加速计算

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!

是否曾经注意到在WebKit驱动的台式机和移动浏览器中出现奇怪的闪烁，还是只是想使用给定设备的硬件加速？ 您可以使用一个非常巧妙的技巧来强制硬件加速！

WebKit CSS (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:

translate3d的使用将CSS动画推向了硬件加速。 即使您要进行基本的2d翻译，也可以使用translate3d来获得更多功能！ 如果切换到上述变换后动画仍然闪烁，则可以使用一些鲜为人知CSS属性来尝试解决此问题：

.animClass {
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

There you have it; more power, less flicker. Happy animating!

你有它; 更大的功率，更少的闪烁。 动画愉快！

翻译自: https://davidwalsh.name/translate3d

translate加速计算