为什么阻塞事件循环不会阻止css动画？

Question

我不知道网页渲染生命周期 - 所以在下面的例子中我有两个心 - 一个是js动画，另一个是CSS。当我使用alert消息阻止事件循环时，CSS心脏仍然是动画的。

let scale = true;
setInterval(() => {
  $('.animate-js').css('transform', `scale(${scale ? 1.4 : 1})`);
  scale = !scale;
}, 1000)

body {
  text-align: center;
}

.heart {
  white-space: nowrap;
  display: inline-block;
  font-size: 150px;
  color: #e00;
  transform-origin: center;
}

.animate-css {
  animation: beat 2s steps(2, end) infinite;
}


/* Heart beat animation */

@keyframes beat {
  to {
    transform: scale(1.4);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="heart">I
  <div class="animate-css heart">&#x2665;</div> CSS</div>
<div class="heart">I
  <div class="animate-js heart">&#x2665;</div> JS</div>
<br/>
<button onClick="alert('hurray!')">
I love it too
</button>

我很确定这是因为CSS动画是在javascript事件循环之外处理的，但我不确定我的假设是否正确。最接近内部解释的文章就是这个 - Rendering Performance。但是，它还不够深入。我会很感激，如果有人解释这个，或者在我去硬核并开始寻找规格之前给我指出一些可消化的材料来阅读/观看。提前致谢

Answer 1

这是因为规范鼓励实施者不遵守规范......

alert()调用pause algorithm，它应该阻止当前任务并导致事件循环无所事事，而不是等待“满足条件目标”。

虽然，这个页面也有一个很大的警告段落，

Pausing对用户体验非常不利，特别是在多个文档之间共享单个event loop的情况下。鼓励用户代理尝试使用pausing的替代品，例如spinning the event loop，或者甚至只是在没有任何暂停执行的情况下继续进行，只要有可能这样做，同时保持与现有内容的兼容性。如果发现不太激烈的替代方案与Web兼容，则该规范将会愉快地改变。

因此，您的UA肯定会遵循建议来尝试使用spin-the-event-loop替代方案，这样可以让其他任务仍然运行，即使调用alert()的任务已暂停。

Answer 2

是的，从我正在阅读的内容来看，CSS动画似乎不在Javascript事件循环中。但是，当它们同时运行时，您可以使用Javascript调用来控制动画。

以下是阅读材料的集合：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations

特别是，animation-play-state是我认为你追求的财产。在你调用Javascript警报之前将它设置为paused将是我如何处理它。用户单击警报中的相应按钮后，将属性设置回running以恢复动画。