解决CSS3动画卡顿问题

解决方法：

• 尽量使用transform属性，避免使用height、width、margin、padding等
• 要求较高时，可以开启GPU硬件加速器

1、尽量使用transform属性，避免使用height、width、margin、padding等

①、因为，transform属性不会更改元素或它周围元素的布局，只是对元素的整体产生影响，比如缩放、旋转

②、对于高度较慢的原因：在动画的每一帧中，浏览器都要执行布局、绘制、以及将新的位图提交给GPU。而将位图加载到GPU的内存是一个相对较慢的操作

浏览器需要做大量的工作的原因：每一帧中元素的内容都在不断变化，改变一个元素的高度可能导致需要同步改变它的子元素的大小，此时，浏览器必须重新计算布局，布局完成后，主线程又必须重新生成该元素的位图。

2、要求较高时，自动检测开启GPU硬件加速器

①、当浏览器检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的就是元素的3D变换

.div{
  -webkit-transform:translate3d(250px,250px,250px)
  rotate3d(250px,250px,250px,-120deg)
  scale3d(0.5,0.5,0.5);

 }

②、有时候并不需要应用3D变换，我们一样可以开启3D引擎，使用transform:translateZ(0)