CSS Triggers
Performance
Each browser actually differs in the way they handle and optimise animations. People tend to forget this, and only optimise for Chrome. Since it's got the nicest dev tools.
She shows csstriggers.com table.
"Change from default": when you first change it.
"Subsequent updates": when you keep changing the value
"Layout": When the browser is calculating the sizes, positions of elements on the page. It's the most expensive one.
"Paint": When individual items are painted (often in the GPU)
"Composite" : When those items are pasted into the layout.
"Paint": When individual items are painted (often in the GPU)
"Composite" : When those items are pasted into the layout.
So you can get from the table what effects how deep the calculations of the browser. Not all browsers react the same way to CSS events.
So he gets to
transform. On Blink engine (Chrome and new Opera) it does not trigger layout and repaint. In other browser it does trigger everything else as well. (Edge does not trigger layout after the initial change, though).Opacity: it's a bit more demandant than transform. But in general
transform and opacity are the most performant properties to animate. Handy alternatives
- transform
scale instead ofwidth andheight translate() instead ofpositionopacity instead ofz-index orvisibility