Why transitions for some CSS properties are slow and none fluent

Question

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;

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?

Answer 1

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;

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

Note: IE9 does not support tarnsforms