Very few CSS animations are cheap in performance terms. Anything that causes the layout process (AKA reflow in Gecko browsers) is bad. The more complex your page the worse the performance hit.

But – these four are apparently particularly cheap (and often GPU assisted):

  • translate(_n_px, _n_px);
  • scale(n);
  • rotate(_n_deg);
  • opacity: 0…1; (edited)
Read more:

* developers.google.com/…/design-and-ux/…/animations-and-performance
* html5rocks.com/…/high-performance-animations/

Last updated on 30th August 2018