Steps
-
avoid using default timing functions like ease
-
these can be replaced with steps()
Documentation that includes steps() usage: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
Replacing "ease-in-out" in the case at the bottom with steps(20) reduced CPU usage from around 5% to around 1.7% and CPU die temperatures from 52 C to 41C. (GPU was not monitored).
body::before { width: 100%; height: 200px; background: linear-gradient( 0deg, var(--color-background-secondary) 0%, var(--color-background-accent-secondary) 100%); animation: body_glow_before 6s steps(20) infinite; }This particular animation worked well with just 20 steps because it was very subtle. Usually you'd need to have at least 24 steps per 1 second of animation to make the individual steps smooth.
-
-
if you are going to use will-change, read the documentation for it
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
Key takeaways:
- Using it in a shotgun approach by applying it everywhere there is a transition or animation worsens both CPU and RAM performance.
- Set it using JS logic right before the transition / animation happens, then remove it.
- Avoid using it on many elements.
- "Elements" deliberately refers to individual DOM elements, not appearances in code.