为什么某些CSS属性的转换速度慢，无法流畅 [英] Why transitions for some CSS properties are slow and none fluent

问题描述

我花了4个小时来完成一个具有可接受效果的简单转换：

I spent a bout 4 hours on having a simple transition with an acceptable performance:

首先我尝试了以下代码：

First I tried this code :

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属性，>

现代的解决方案是什么-browser？

The result was terrible on Chrome v21.0.1180.89 and FireFox v15.0.1, but was great on IE10. I captured the CPU usage and GPU usage graph and found that chrome does not use GPU for basic css properties, What is the solution for modern-browsers?

推荐答案

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

As the result my 4 hours experiments it is better to use transform like below:

        -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。

This was great on IE10, Chrome v21.0.1180.89 and FireFox v15.0.1.

注意：IE9不支持tarnsforms

Note: IE9 does not support tarnsforms

这篇关于为什么某些CSS属性的转换速度慢，无法流畅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！