人的眼睛对图像有短暂的记忆效应，所以当眼睛看到多张图片连续快速的切换时，就会被认为是一段连续播放的动画了。动画是由一张张图片组成，在计算机中，我们称每一张图片为一帧动画。播放速度一般称为每秒24帧（影视）或者每秒30帧（游戏）。
我们可以打开chrome控制台，选择paint flashing,当页面刷新或者有元素重新绘制的时候重新绘制的元素会呈现绿色闪现。
浏览器渲染过程：
- 根据html构建html树（DOM）
- 根据CSS构建CSS树（CSSOM）
- 将两棵树合并成一棵渲染树（render tree）
- 布局 - layout（文档流，盒模型，计算元素大小和位置）
- 绘制 - paint（把边框颜色，文字颜色，阴影等画出来）
- 合成 - compose（根据层叠关系展示画面）
一般我们在对元素的样式进行修改或更新时有可能会触发layout和paint，具体涉及到那些属性需会触发layout和paint可以去csstriggers.com尝试。常见的更新绘制方式：
- div.remove()会触发第一种，layout-paint都走一遍；
- 改变背景颜色会触发第二种，直走paint；
- 改变transform会触发第三种，只会composite；
关于动画的优化：
从CSS角度看：我们最好使用transform而不通过改变left等方式去操作dom，因为如下图：
可见transform在某些浏览器上不会触发layout和paint，而left会全部触发。
从JS角度看：我们可以使用requestAnimationFrame代替setTimeout或setInterval，至于原因之后我再补充。
CSS动画的两种实现方式：
transform
常用属性值：
translateX/Y/Z - 位移：注意translateZ需要再父级上加perspective才能看到近大沅小的效果 eg:perspective:1000px相当于视点再父级中间向屏幕里1000px处（translateZ值越大离视点越远，越小离视点越近）；可以通过设置translate（-50%，-50%）结合left，top50%实现居中；
scale - 缩放：注意一般不会使用scale，会变模糊，border也会伸缩
rotateX/Y/Z - 旋转
skewX/Y - 倾斜
结合上transition过渡的配合使得动画更加流畅（inline元素不支持transform，需要更改为block元素；display：none不支持transition）。
