为什么某些CSS属性的转换很慢且没有流畅

Question

我花了大约4个小时进行一次性能可接受的简单过渡:

首先我尝试了这段代码:

left: 2000px;
-webkit-transition: left 1s linear;
-moz-transition: left 1s linear;
-ms-transition: left 1s linear;

结果在Chrome v21.0.1180.89和FireFox v15.0.1上很糟糕,但在IE10上很棒.我捕获了CPU使用率和GPU使用率图,发现chrome不使用GPU作为基本css属性, 现代浏览器的解决方案是什么？

Answer 1

不要使用left或top,bottom,margin或padding属性来移动元素,而只能使用"transform:translate".

以同样的方式,要调整元素大小,只使用"transform:scale"而不是height或width.

左,上,下,边距,填充,高度,宽度属性(以及许多其他)强制浏览器重新计算所有布局,因此具有大量CPU工作的许多元素的几何形状.

每个属性都有不同的权重,在本文中它清楚地解释 了高性能动画

如果你不记得每个属性权重,Edit1:triggers.com似乎是一个很好的页面

Answer 2

结果我的4小时实验最好使用如下变换:

        -webkit-transform: translate(2000px, 0);
        -webkit-transition: -webkit-transform 1s linear;
        -moz-transform: translate(2000px, 0);
        -moz-transition: -moz-transform 1s linear;
        -ms-transform: translate(2000px, 0);
        -ms-transition: -ms-transform 1s linear;

这在IE10,Chrome v21.0.1180.89和FireFox v15.0.1上非常棒.

注意:IE9不支持tarnsforms