暂停 CSS @keyframes 动画

让我们了解一下 CSS @keyframes 动画，关于如何暂停和控制动画的方法。有一个专门用于它的 CSS 属性，也可以使用 JavaScript 进行控制，但是细节上有很多细微差别。

我注意到一些以前从未想过的事情，当前不在视口中的动画仍在运行！但这些播放的动画仍然使用 CPU / GPU！它们消耗了不必要的处理能力，从而降低了页面的其他部分的速度。

在 CSS 中真正暂停动画的唯一方法是使用 animation-play-state 带有 paused 值的属性。

.paused {
  animation-play-state: paused;
}

在JavaScript中，该属性为 animationPlayState，其设置如下：

element.style.animationPlayState = 'paused';

我们可以通过读取的当前值来创建一个播放和暂停动画的切换开关 animationPlayState：

const running = element.style.animationPlayState === 'running';

然后将其设置为相反的值：

element.style.animationPlayState = running ? 'paused' : 'running';

暂停动画的另一种方法是设置 animation-duration 为 0s。动画在技术上仍在运行，但是由于没有持续时间，因此您将看不到任何动作。

我们可以完全删除动画，通过 animation: none 真正暂停动画。

.remove-animation {
  animation: none !important;
}

总结：为了性能优化，常常在页面离开的时候需要暂停动画，如果是 CSS @keyframes 动画，通过 animation-play-state 来暂停动画执行。