如何使用純 JavaScript 暫停和恢復 CSS3 動畫？

如何使用本機JavaScript 暫停和恢復CSS3 動畫：

此問題尋求暫停和恢復CSS3 動畫的解決方案（圖像幻燈片） ）透過點擊圖像，無需外部庫。提供的程式碼嘗試透過在函數內暫停多個動畫來管理此問題，但它遇到了限制。

要使用純JavaScript 有效地暫停和恢復CSS3 動畫，請考慮使用CSS 類：

.paused {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

透過從動畫元素中分配或刪除此類，您可以根據需要暫停或恢復動畫：

function toggleAnimation(element, pause) {
  pause ? element.classList.add('paused') : element.classList.remove('paused');
}

這種方法允許同時控制多個動畫，並在CSS 和JavaScript 之間提供更清晰的關注點分離。它還確保點擊事件不會幹擾動畫。

以上是如何使用純 JavaScript 暫停和恢復 CSS3 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！