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?

Solution 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

Solution 2

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

Comments

[Mohammad Nikravan]

I wish webkit support use GPU for basic CSS property transition.

[jornare]

IE9 supports transforms, but not animated transitions