移动端动画使用transform提升性能

在移动端做动画，对性能要求较高
而通常的改变margin属性是性能极低的，即使使用绝对定位改变top,left这些属性性能也很差
因此应该使用transform来进行动画效果，如transform:translateX(100px)

原理：

首先，浏览器绘制 DOM 的过程是这样子的：

1. 获取 DOM 并将其分割为多个层（layer）
2. 将每个层独立地绘制进位图（bitmap）中
3. 将层作为纹理（texture）上传至 GPU
4. 复合（composite）多个层来生成最终的屏幕图像。

left/top/margin 之类的属性会影响到元素在文档中的布局，当对布局（layout）进行动画时，该元素的布局改变可能会影响到其他元素在文档中的位置，就导致了所有被影响到的元素都要进行重新布局，浏览器需要为整个层进行重绘并重新上传到 GPU，造成了极大的性能开销。

transform 属于合成属性（composite property），对合成属性进行 transition/animation 动画将会创建一个合成层（composite layer），这使得被动画元素在一个独立的层中进行动画。通常情况下，浏览器会将一个层的内容先绘制进一个位图中，然后再作为纹理（texture）上 传到 GPU，只要该层的内容不发生改变，就没必要进行重绘（repaint），浏览器会通过重新复合（recomposite）来形成一个新的帧。

层创立的条件如下：

• 3D 或透视变换 CSS 属性
• 使用加速视频解码的 <video> 元素
• 拥有 3D (WebGL) 上下文或加速的 2D 上下文的 <canvas> 元素
• 复合插件(如 Flash)
• 进行 opacity/transform 动画的元素
• 拥有加速 CSS filters 的元素
• 元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)
• 元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

总结：

1. 对布局属性进行动画，浏览器需要为每一帧进行重绘并上传到 GPU 中
2. 对合成属性进行动画，浏览器会为元素创建一个独立的复合层，当元素内容没有发生改变，该层就不会被重绘，浏览器会通过重新复合来创建动画帧