如何有效重啟CSS3動畫？

有效恢復 CSS3 動畫

重新啟動 CSS3 動畫可能是一項具有挑戰性的任務。本問題研究了一種情況，其中使用scaleY(0) 變換對條進行動畫處理以描繪剩餘時間，並且需要在將動畫恢復到scaleY(0) 之前將動畫重置為scaleY(1)。

雖然最初嘗試透過設定scaleY(1)來重置動畫被證明是無效的，但該問題提出了一個有趣的解決方案，即刪除並重新插入動畫元素的克隆以重新啟動動畫。然而，這種方法可能不是最有效或最直接的方法。

不依賴元素移除和重新插入，更實用的解決方案是利用回流技術。此技術涉及暫時刪除動畫樣式、觸發重排以套用更改，然後重設動畫樣式。透過將以下 JavaScript 函數合併到程式碼中：

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null;
}

然後在事件（例如點擊按鈕）上觸發此函數，可以有效地重置動畫。這種方法提供了一種簡單有效的重新啟動 CSS3 動畫的方法。

以上是如何有效重啟CSS3動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！