如何在不使用逾時的情況下有效率地重新啟動 CSS3 動畫？

重新審視CSS3 動畫重啟：推出替代方法

重啟CSS3 動畫可能會帶來挑戰，尤其是在嘗試恢復元素的比例並將其動畫恢復到原始狀態時。雖然刪除和重新插入元素提供了一種解決方法，但它可能不是最有效的解決方案。

更優雅的方法是利用回流來應用更改，而不依賴超時。以下JavaScript 函數示範了此技術：

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

結合下面的CSS 和HTML，此函數允許在點擊時無縫重置動畫：

#animated {
  position: absolute;
  top: 70px;
  width: 50px; height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0% { left: 0; }
  50% { left: calc( 100% - 50px ); }
  100% { left: 0; }
}

<div>

透過觸發回流後，動畫將被重置，無需複雜的延遲或計時。這種方法為重新啟動任何 CSS3 動畫提供了一個乾淨且有效率的解決方案。

以上是如何在不使用逾時的情況下有效率地重新啟動 CSS3 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！