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

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