前天我去面试了...好吧，对于自己6年6份工作的悲催经历，我自己也是醉了。
但没办法，我这种当时上学没好好学习，临毕业才出家写代码的半吊子码农，起步没起好，以至于一直没能找到真正让自己满意的工作。
通过了几年的努力和累积，总算是把信心给拿回来了。
这不，又踏上我的追求之路了。我真心是希望这是我最后一次换工作了。
阿门，愿主保佑我...
那个...好像废话说得有点多了。OK，正题时间。
是这样，面试的时候，技术官问了我一个问题，引发了我的深思~那就是CSS动画的效率问题。
这个...因为之前接触移动项目只有约1年的时间，当时对移动前端开发性能研究还没触及这一块...
唉，没办法，初次接触移动项目，问题难免多多，而且当时连动画都用得不多，何况是动画性能的研究...
所以，作为一个老实人，我如实回答了...（当然后面还有一些问题我也失水准了，以至于这一次面试我感觉十有八九是要挂了...）
面试挂了就挂了，咱解决问题的心不能凉啊~（周围众人抛来不满的表情：你小样又在说废话了...- -b）
于是各种资料查找，找到了两篇相关的文章：
http://www.w3cfuns.com/article-5598175-1-1.html
http://www.cnblogs.com/PeunZhang/p/3510083.html
目前对提升移动端CSS3动画体验的主要方法有几点：
1.在桌面端和移动端用CSS开启硬件加速
我们可以在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能。
当浏览器检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。
.cube {
-webkit-transform: translate3d(250px,250px,250px) rotate3d(250px,250px,250px,-120deg) scale3d(0.5, 0.5, 0.5);
}
如果我们不需要对元素进行3D变换，又想启动硬件加速，可以用下面的小技巧来诱使浏览器启动硬件加速。
.cube {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/* Other transform properties here */
}
使用transform: translateZ(0)，不会对元素进行3D变换，但一样可以触发硬件加速。
同理，也可以使用下面的做法：
.cube {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Other transform properties here */
}
在 Chrome and Safari中，当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果，下面的代码可以修复此情况：
.cube {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
/* Other transform properties here */
}
通过使用translate3d制作的位移动画流畅度会明显优于使用left，right，top，bottom等属性。
但这种做法同时也增加了内存的使用，而且它会加快移动端设备的电池消耗。
2.尽可能少的使用box-shadows与gradients
box-shadows（阴影）与gradients（渐变）往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们，所以拥抱扁平化设计吧。
3.尽可能的让动画元素不在文档流中，以减少重排
方法很简单，直接在动画元素上使用
position: fixed;
或者
position: absolute;
原文：http://www.cnblogs.com/czf-zone/p/4340185.html