让我们了解一下 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 来暂停动画执行。
