开启CSS3硬件加速

1. 何为硬件加速

就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。

2 .为何要客气硬件加速

国内浏览器的内核，大部分是Chrome的内核，Chrome下的动画比IE9和FF都要慢很多，所以要开启硬件加速，提升动画的流畅性。

3. 如何开启硬件加速

Chrome, FireFox, Safari, IE9+ 以及最新的 Opera都支持硬件加速，只要使用特定的CSS语句就可以开启硬件加速:
3.1 使用3d效果来开启硬件加速

.lusheng {
   -webkit-transform: translate3d(-50%,-50%,0x) 
  rotate3d(10px,10px,0,180deg)
   scale3d(1.1,1.1, 1.1);
}

3.2 如果并不需要用到transform变换，仅仅是开启硬件加速:

.lusheng{
   -webkit-transform: translateZ(0);
}

3.3 通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之：

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

注:　通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题，但使用仍需谨慎，使用前一定要进行严谨的测试，否则它反而会大量占用浏览网页用户的系统资源，尤其是在移动端