CSS控制動(dòng)畫(huà)的暫停與重啟

在CSS中，我們可以使用animation-play-state屬性來(lái)控制動(dòng)畫(huà)的播放狀態(tài)，該屬性接受兩個(gè)值：running和paused，通過(guò)改變這個(gè)屬性的值，我們可以讓動(dòng)畫(huà)從暫停狀態(tài)恢復(fù)播放，或者從播放狀態(tài)進(jìn)入暫停狀態(tài)。

假設(shè)我們有一個(gè)名為my-animation的動(dòng)畫(huà)，我們可以這樣控制它：

1、暫停動(dòng)畫(huà)：

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

2、重啟動(dòng)畫(huà)：

.my-element {
  animation-play-state: running;
}

需要注意的是，animation-play-state屬性只會(huì)影響正在播放的動(dòng)畫(huà)，如果動(dòng)畫(huà)還沒(méi)有開(kāi)始播放，或者已經(jīng)播放結(jié)束，這個(gè)屬性都不會(huì)有任何效果。

如果你想要通過(guò)JavaScript來(lái)控制動(dòng)畫(huà)的暫停和重啟，你可以通過(guò)操作CSS類(lèi)來(lái)實(shí)現(xiàn)，你可以給元素添加一個(gè)暫停動(dòng)畫(huà)的類(lèi)，或者移除這個(gè)類(lèi)來(lái)重啟動(dòng)畫(huà)，這種方法可以讓你更靈活地控制動(dòng)畫(huà)的播放狀態(tài)。