css 開啓硬件加速

1. 何爲硬件加速

就是將瀏覽器的渲染過程交給GPU處理，而不是使用自帶的比較慢的渲染器。這樣就可使得animation與transition更加順暢。

2. 如何開啓硬件加速

Chrome, FireFox, Safari, IE9+ 以及最新的 Opera都支持硬件加速，只要使用特定的CSS語句就能夠開啓硬件加速:

/**使用3d效果來開啓硬件加速**/
.speed-up {
   -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
}

若是並不須要用到transform變換，僅僅是開啓硬件加速，能夠用下面的語句:

/**原理上仍是使用3d效果來開啓硬件加速**/
.speed-up{
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
}

對於safari以及chrome，可能會在使用animation或者transition時出現閃爍的問題，可使用如下的解決方法:

-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;

/**webkit上也能夠用如下語句  **/
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);

3. 注意事項

硬件加速最好只用在animation或者transform上。不要濫用硬件加速，由於這樣會增長性能的消耗，若是濫用反而會使動畫變得更加卡，這樣就得不償失了。