CSS Triggers

In notebook:
FrontEndMasters Motion Design with CSS
Created at:
libraries React JavaScript css animation


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. 

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 of ​width​ and ​height
  • ​translate()​ instead of ​position​ 
  • ​opacity​ instead of ​z-index​ or ​visibility