重新啟動 CSS3 動畫

在使用者互動時恢復 CSS3 動畫是一項常見任務。雖然刪除並重新插入動畫元素可能看起來很有效，但它引入了不必要的複雜性。透過利用重排的力量來無縫重置動畫，出現了更完善的解決方案。

重排是重新格式化和重新繪製文件結構的過程，提供了一種在不中斷動畫時間軸的情況下更改樣式的便捷機制。透過將動畫屬性簡單地設定為“none”，然後觸發重排，瀏覽器會收到一個訊號來忽略任何正在進行的動畫。這允許後續樣式變更立即生效，從而有效地重新啟動動畫。

為了說明這一點，請考慮以下 JavaScript 片段：

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

觸發時，此函數會暫停「動畫」元素上的動畫，強制瀏覽器重新繪製，然後將動畫屬性恢復到其原始狀態。透過避免動畫分配的延遲或鏈接，此方法簡化了動畫重置過程，確保流暢的視覺體驗。