5 ms·

…and the CPU skyrockets. Uh.

• dspillett 5y ago
  It shouldn't cause reflow by my understanding, the content never changes size, so the CPU hit should be minimal normally. It is going to consume unnecessary bandwidth and look messy if looking at it in a browser running remotes (via RDC, VNC, etc) but other methods like animated gifs will have that same effect too. In any case, for an animation like this I'd set it to run through a few times, perhaps just once, then stop instead of bouncing around infinitely. Or have a long frame at then end of the sequence so that it only animates occasionally.
  • lelandfe 5y ago
    Alternatively, could use an IntersectionObserver to stop and start it.
    • dspillett 5y ago
      That too if off-screen animation is causing excess CPU use. Though the loop than ends or only results in occasional animation has another rather nice benefit: less stuff jiggling around to drag my attention away from what I'm actually trying to look at. And using that will break the articles “with pure CSS” intent.
  • mro_name 5y ago
    I see ~84% on one core in Firefox.
    • dspillett 5y ago
      If something that shouldn't cause reflow and isn't animating a lot of content (or animating insanely fast) is eating bags of time on a modern CPU, I would suggest that is a browser bug not a problem with the idea. Though do make sure you are understanding that 84% figure. Is it really that much of a full speed core or that much of one that is in a low power mode because none of the CPU needs to be at full speed ATM. CPU loading read from task manager apps and similar can be quite misleading these days.