GPU绑定的动画是否仍受CPU负载的影响?

我已经为DIV创建了一个具有以下样式的合成层:

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

然后,我使用Web动画API对其应用动画:

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

据我所知,这个动画现在由GPU处理,并且这个层独立于其他层,因此GPU可以独立地对它进行操作,而不必担心计算页面其他部分的几何图形。

我不明白的是,如果我调用一个CPU密集型函数,该动画将在函数运行时完全停止,并在函数退出时再次恢复:

function mySlowFunction(baseNumber) {
    console.time('mySlowFunction');
    var result = 0; 
    for (var i = Math.pow(baseNumber, 10); i >= 0; i--) {       
        result += Math.atan(i) * Math.tan(i);
    };
    console.timeEnd('mySlowFunction');
    return result;
}

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

有什么方法可以防止这种情况发生吗?

https://jsfiddle.net/Lsmw85rv/4/