为什么主线程会阻止CSS转换动画？

Question

我举了一个例子，对CSS转换进行动画处理，当您单击它时，动画被1秒长的循环阻塞。怎么来的？我以为动画转换发生在单独的线程上。

这是示例（单击该示例以阻塞主线程，从而暂停动画）：

window.addEventListener('click', kill)

function kill() {
  var start = +new Date;
  while (+new Date - start < 2000){}
}

    html, body, div {
        width: 100%; height: 100%;
        margin: 0; padding: 0;
        /* background: #364659; */
        /* background: #293442; */
        background: #1E2630;
    }

    @keyframes ShimmerEffect {
        0% { transform: translate3d(-15%, -15%, 0) }
        100% { transform: translate3d(-60%, -60%, 0) }
    }
    .shimmerSurface {
/*         overflow: hidden; */
/*         perspective: 100000px */
    }
    .shimmerSurfaceContent {
        transform-style: preserve-3d;
        background: linear-gradient(
            -45deg,
            rgba(0,0,0,0) 40%,
            rgba(244,196,48,0.6) 50%,
            rgba(0,0,0,0) 60%
        );
        background-repeat: repeat;
        background-size: 100% 100%;
        width: 400%; height: 400%;

        animation: ShimmerEffect 1.8s cubic-bezier(0.75, 0.000, 0.25, 1.000) infinite;
    }

<div class="shimmerSurface">
    <div class="shimmerSurfaceContent"></div>
</div>

（codepen link）

编辑：似乎它并未在Safari中被阻止（尽管它会破坏渐变），但仅在Chrome和Firefox中被阻止。如何在Chrome和Firefox中取消屏蔽动画？