Home/ Questions/Q 8532505
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T09:43:51+00:00

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

  • 0

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, enter image description here
enter image description here
What is the solution for modern-browsers?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0