解答
(1)尽可能多地利用硬件能力,如使用3D变形来开启GPU加速,例如以下代码。
-webkit-transform: translate 3d(0, 0, 0);
-moz-transform : translate3d(0,0, 0);
-ms-transform : translate 3d(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;
帖子还没人回复快来抢沙发