15

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?

Ata Iravani
  • 2,146
  • 7
  • 29
  • 40

2 Answers2

25

Don't use left or top, bottom, margin or padding properties to move elements, but only "transform: translate".

In the same way, to resize elements use only "transform: scale" instead of height or width.

Left, top, bottom, margin, padding, height, width properties (and many others) force the browser to recalculate all the layout, so geometry of many elements, with a lot of CPU work.

Each property has a different weight, in this article it's clearly explained high performance animations

Edit1: triggers.com seems to be a good page if you don't remember each property weight

Andrea Mattioli
  • 873
  • 9
  • 9
20

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

Ata Iravani
  • 2,146
  • 7
  • 29
  • 40