When you change a CSS properties value, the browser needs to react to your change. Some values change the layout of the page. For instance, a change in width
requires the browser to update layout, then “paint” any pixels that have changed, then “composite” them together. That’s a lot of work. Some CSS properties can be changed more inexpensively. For instance, a change in background-image
doesn’t require any layout changes, but does require paint and composite.
Paul Lewis did all the research on which properties do what. A good reference to help you think about what kind of changes you can make that are easy for the browser (thus fast) and what kind of changes are hard (thus slow).
Direct Link to Article — Permalink
CSS Triggers is a post from CSS-Tricks