本文目錄導(dǎo)讀：

1. 使用JavaScript控制CSS3動(dòng)畫(huà)

CSS3動(dòng)畫(huà)是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的一部分，它可以讓網(wǎng)頁(yè)更加生動(dòng)、有趣，并且能夠提供更好的用戶(hù)體驗(yàn)，有時(shí)候我們需要控制動(dòng)畫(huà)的播放，比如在用戶(hù)交互后停止播放，或者根據(jù)用戶(hù)的操作來(lái)決定動(dòng)畫(huà)是否繼續(xù)播放，CSS3動(dòng)畫(huà)怎么控制停止播放呢？

使用JavaScript控制CSS3動(dòng)畫(huà)

我們可以使用JavaScript來(lái)控制CSS3動(dòng)畫(huà)的播放和停止，可以通過(guò)添加或刪除CSS類(lèi)來(lái)控制動(dòng)畫(huà)是否播放，我們可以定義一個(gè)CSS類(lèi)來(lái)控制動(dòng)畫(huà)的播放：

.playing {
  animation-play-state: running;
}

在JavaScript中，我們可以根據(jù)用戶(hù)的操作來(lái)決定是否添加這個(gè)類(lèi)：

function stopAnimation() {
  var element = document.getElementById('my-element');
  element.classList.remove('playing');
}

這樣，當(dāng)我們調(diào)用stopAnimation函數(shù)時(shí)，動(dòng)畫(huà)就會(huì)停止播放。

二、使用CSS3的animation-play-state屬性

CSS3提供了一個(gè)animation-play-state屬性，可以用來(lái)控制動(dòng)畫(huà)的播放和停止，這個(gè)屬性有兩個(gè)值：running和paused，當(dāng)設(shè)置為running時(shí)，動(dòng)畫(huà)會(huì)正常播放；當(dāng)設(shè)置為paused時(shí)，動(dòng)畫(huà)會(huì)停止播放。

我們可以通過(guò)JavaScript來(lái)動(dòng)態(tài)地改變這個(gè)屬性的值：

function pauseAnimation() {
  var element = document.getElementById('my-element');
  element.style.animationPlayState = 'paused';
}

這樣，當(dāng)我們調(diào)用pauseAnimation函數(shù)時(shí)，動(dòng)畫(huà)就會(huì)停止播放。

控制CSS3動(dòng)畫(huà)的播放和停止需要借助JavaScript來(lái)實(shí)現(xiàn)，通過(guò)添加或刪除CSS類(lèi)，或者動(dòng)態(tài)改變animation-play-state屬性的值，我們可以實(shí)現(xiàn)對(duì)CSS3動(dòng)畫(huà)的***控制。