Menu
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?
801
The transition-delay property specifies when the transition effect will start. The transition-delay value is defined in seconds (s) or milliseconds (ms).
If you have a transition not working, check that the starting value of the property is explicitly set. Sometimes, you'll want to animate height and width when the starting or finishing value is auto . (For example, to make a div collapse, when its height is auto and must stay that way.)
The transition-delay CSS property specifies the duration to wait before starting a property's transition effect when its value changes.
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
110
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
