User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
Steps to reproduce:
I did some research on how efficient browsers are at animations where not-a-lot happens.
I played with the above while monitoring the task manager.
The "High frequency animation" shows how much CPU is used on a 60hz (or whatever display frequency) animation.
"setTimeout" shows how much CPU is used for a setTimeout-driven animation that updates every 5 seconds. This uses almost no CPU.
The rest are CSS/web animations that update infrequently.
It seems like Firefox uses way too much CPU on these types of animation. Chrome has similar issues (https://bugs.chromium.org/p/chromium/issues/detail?id=1157483). Safari does really well.
Low frequency animations are useful for things like blinking cursors. Developers shouldn't have to fallback to setTimeout for efficiency here.
Also, if browsers were efficient here, empty animations with the web animation API could be used as an alternative to setTimeout/Interval, with the benefit of pausing while the tab is hidden, and having a more consistent timing model.