首页 > 代码库 > 移动页面请使用CSS3动画

移动页面请使用CSS3动画

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

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

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

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

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

 

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

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

 

移动页面请使用CSS3动画