Are GPU-bound animations still affected by CPU load?

Question

I have created a compositing layer for a div with the following styles:

div {
  position: absolute;
  height: 50px;
  width: 50px;
  background: #900;
  top:         


        

Answer 1

Yes they may still get affected by CPU load.
The update the rendering algorithm is part of the Event Loop, so if somehow you do block the event loop, you also do block the rendering.

Now, implementors are encouraged to "spin the event loop" when they meet a long running code, so that UI can still be reactive (and non-js powered animations can keep running), but this is just an encouragement and all implementations don't do it the same way.

For instance, on my Firefox, I don't see any slowdown from your script, nor even from the more aggressive one below, while on my Chrome I can clearly see the rendering being blocked.

Now to avoid this, as has been said in comment, the real bullet proof solution would be to run your blocking script in a second thread using a Web Worker.

document.getElementById("box").animate(
  [{
      transform: 'rotate(0) translate3D(-50%, -50%, 0)'
    },
    {
      transform: 'rotate(360deg) translate3D(-50%, -50%, 0)'
    }
  ], {
    duration: 500,
    iterations: Infinity
  }
);

function mySlowFunction(baseNumber) {
  console.time('mySlowFunction');
  const now = performance.now();
  while (performance.now() - now < baseNumber * 1000);
  console.timeEnd('mySlowFunction');
}

setTimeout(() => mySlowFunction(3), 3000);

#box {
  position: absolute;
  height: 50px;
  width: 50px;
  background: #900;
  top: 100px;
  left: 200px;
  will-change: transform;
  transform: translateZ(0);
}

<div id="box"></div>