动画的实现原理，是利用了人眼的 “视觉暂留” 现象，在短时间内连续播放数幅静止的画面，使肉眼因视觉残象产生错觉，而误以为画面在 “动”。
动画的基本概念：
帧：在动画过程中，每一幅静止画面即为一 “帧”；
帧率：即每秒钟播放的静止画面的数量，单位是 fps(Frame per second)；
帧时长：即每一幅静止画面的停留时间，单位一般是 ms(毫秒)；
跳帧 (掉帧 / 丢帧)：在帧率固定的动画中，某一帧的时长远高于平均帧时长，导致其后续数帧被挤压而丢失的现象。
一般浏览器的渲染刷新频率是 60 fps，所以在网页当中，帧率如果达到 50-60 fps 的动画将会相当流畅，让人感到舒适。
如果使用基于 javaScript 的动画，尽量使用 requestAnimationFrame。避免使用 setTimeout，setInterval。
避免通过类似 jQuery animate()-style 改变每帧的样式，使用 CSS 声明动画会得到更好的浏览器优化。
使用 translate 取代 absolute 定位就会得到更好的 fps，动画会更顺滑。
多利用硬件能力，如通过 3D 变形开启 GPU 加速
一般在 Chrome 中，3D 或透视变换（perspective transform）CSS 属性和对 opacity 进行 CSS 动画会创建新的图层，在硬件加速渲染通道的优化下，GPU 完成 3D 变形等操作后，将图层进行复合操作（Compesite Layers），从而避免触发浏览器大面积重绘和重排。
注：3D 变形会消耗更多的内存和功耗。
使用 translate3d 右移 500px 的动画流畅度要明显优于直接使用 left：
CSS Code复制内容到剪贴板
.ball-1 {
transition: -webkit-transform .5s ease;
-webkit-transform: translate3d(0, 0, 0);
}
.ball-1.slidein{
-webkit-transform: translate3d(500px, 0, 0);
}
.ball-2 {
transition: left .5s ease; left：0;
}
.ball-2.slidein {
left：500px;
}
提升 CSS 选择器性能
CSS 选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间，所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器。而在这之前我们需要了解 CSS 选择器匹配的机制， 如子选择器规则：
CSS Code复制内容到剪贴板
#header > a {font-weight:blod;}
我们中的大多数人都是从左到右的阅读习惯，会习惯性的设定浏览器也是从左到右的方式进行匹配规则，推测这条规则的开销并不高。
