如何高效重啟CSS3動畫？

重新啟動 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 規則和動畫元素的CSS 規則和動畫元素關鍵影格動畫，如下圖：

#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; }
}

最後，包含HTML標籤：

<div><p>這種方法可以在您按一下「重設」按鈕時有效地重新啟動動畫，而無需用於複雜的逾時或元素操作。 </p></div>

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