暫停 CSS @keyframes 動畫

讓我們了解一下 CSS @keyframes 動畫，關于如何暫停和控制動畫的方法。有一個專門用于它的 CSS 屬性，也可以使用 JavaScript 進行控制，但是細節(jié)上有很多細微差別。

我注意到一些以前從未想過的事情，當前不在視口中的動畫仍在運行！但這些播放的動畫仍然使用 CPU / GPU！它們消耗了不必要的處理能力，從而降低了頁面的其他部分的速度。

在 CSS 中真正暫停動畫的唯一方法是使用?animation-play-state?帶有?paused?值的屬性。

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

在JavaScript中，該屬性為?animationPlayState，其設置如下：

element.style.animationPlayState = 'paused';

我們可以通過讀取的當前值來創(chuàng)建一個播放和暫停動畫的切換開關?animationPlayState：

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

然后將其設置為相反的值：

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

暫停動畫的另一種方法是設置 animation-duration 為 0s。動畫在技術上仍在運行，但是由于沒有持續(xù)時間，因此您將看不到任何動作。

我們可以完全刪除動畫，通過 animation: none 真正暫停動畫。

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

總結：為了性能優(yōu)化，常常在頁面離開的時候需要暫停動畫，如果是 CSS @keyframes 動畫，通過 animation-play-state 來暫停動畫執(zhí)行。