重新啟動 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>
這種方法可以在您按一下「重設」按鈕時有效地重新啟動動畫，而無需用於複雜的逾時或元素操作。
以上是如何高效重啟CSS3動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
