google-chrome - 为什么某些 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”而不是高度或宽度。

Left、top、bottom、margin、padding、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