CSS 動畫是 Web 開發(fā)中常用的技術(shù)之一，它可以通過設(shè)置動畫效果來為網(wǎng)頁增添更多的活力和趣味性。但是有時候，我們需要對動畫進(jìn)行控制，手動停止或重新啟動它。那么，如何實(shí)現(xiàn) CSS 動畫的停止和啟動呢？

/* 在 CSS 中定義一個動畫 */
@keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
/* 設(shè)置元素應(yīng)用動畫 */
div {
animation-name: example;
animation-duration: 2s;
}

以上是一個簡單的定義和應(yīng)用 CSS 動畫的例子。接下來，我們來看看如何通過 JavaScript 控制它的播放。

const element = document.querySelector('div');
/* 暫停動畫 */
element.style.animationPlayState = 'paused';
/* 恢復(fù)動畫 */
element.style.animationPlayState = 'running';

上面代碼中，我們通過獲取應(yīng)用動畫的元素，使用style屬性中的animationPlayState屬性來控制動畫的播放狀態(tài)。將其設(shè)置為paused即可停止動畫，將其設(shè)置為running則可以恢復(fù)動畫。

除了直接在 JavaScript 中控制動畫，我們也可以通過 CSS 類的添加和刪除來實(shí)現(xiàn)動態(tài)的停止和啟動。

/* 定義一個動畫類 */
.stop-animation {
animation-play-state: paused !important;
}
/* JavaScript 中添加該類 */
const element = document.querySelector('div');
element.classList.add('stop-animation');
/* JavaScript 中刪除該類 */
element.classList.remove('stop-animation');

我們在 CSS 中定義了一個名為stop-animation的類，其中設(shè)置了animation-play-state為paused。在 JavaScript 中添加該類即可停止動畫，刪除該類即可恢復(fù)動畫。

通過上述的方法，我們可以控制 CSS 動畫的停止和啟動，進(jìn)一步定制頁面效果。