GPU上的CSS动画不适用于百分比值

Question

我在transform: translate()属性中使用百分比值。为什么动画使用CPU-而不使用GPU？ 如果我使用其他值，例如px，vh/vw，em等，则动画将在GPU上执行。

例如，以下代码段将transform: translate()属性与百分比值一起使用。 https://codepen.io/izosimov/pen/yLyYxWb

当我阻塞主线程时，动画会冻结，这就是我们知道动画在CPU上执行的方式。 如果我将百分比替换为px，即使主线程被阻止，动画也会继续运行。 https://codepen.io/izosimov/pen/vYENzPP

您可以使用此代码阻止主线程。但是要小心。

console.log('start');
for (let i = 0; i < 2000000000; i++); // it blocks main thread in my computer for a few seconds.
console.log('end');