移动页面请使用CSS3动画

说到动画，我们一般会使用jQuery 中的animate();

在PC浏览器中，是很方便的，由于PC的高性能，这种不断修改DOM的做法确实不会出现太大的问题，但是在手机端就不同了。

手机上使用jQuery 或 Zepto中的animate还是会带来一些小的卡顿。

手机平台虽然硬件性能稍微差一些，但是webkit内核有着很大的占有率。

像简单的修改某一个CSS属性的事可以交给transition去做（加前缀），用transition监控的属性，只要修改了值，就会自动按照设定好的时间完成过度，注意这种过度是由浏览器渲染引擎完成的，不会引起re-flow和re-draw 所以看起来比较流畅。

 

而复杂的动画就要交给CSS3中的animation（有前缀）和@keyframes 来完成。

设定每个时间点的式样，就会想老式动画片一样了。