02哪些方法能提升移动端CSS3动画体验?
(1)尽可能多地利用硬件能力,如使用3D变形来开启GPU加速,例如以下代码。-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);一个元素通过translate3d右移500X的动画流畅度会明显优于使用left属性实现的动画移动,原因是CSS动画属性会触发整个页面重排、重绘、重组。paint通常是最耗性能的,尽可能避免使用触发paint的CSS动画属性。如果动画执行过程中有闪烁(通常发生在动画开始的时候),可以通过如下方式处理。-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;(2)尽可能少使用box-shadows和gradients,它们往往严重影响页面的性能,尤其是在一个元素中同时都使用时。(3)尽可能让动画元素脱离文档流,以减少重排,如以下代码所示。position:fixed;position:absolute;
来自:浏览器、网络相关-性能和加载优化