在使用CSS動畫時，我們經(jīng)常需要重新開始這些動畫，以讓它們在用戶操作時重新運行。下面介紹幾種實現(xiàn)CSS動畫重新開始的方式。

// 方式一：通過修改CSS屬性來觸發(fā)重新開始動畫
// 在CSS樣式中定義動畫
div {
animation: myanim 1s ease forwards;
}
// JavaScript代碼中通過修改CSS屬性的方式重新開始動畫
var divElement = document.querySelector('div');
divElement.style.animation = 'none'; // 先將動畫設(shè)為none，以便下面的代碼生效
void divElement.offsetWidth; // 重繪，讓CSS屬性修改生效
divElement.style.animation = ''; // 將動畫設(shè)回原本的值，觸發(fā)重新開始動畫
// 方式二：通過改變class名稱
// 在CSS樣式中定義動畫和一個class
div {
animation: myanim 1s ease forwards;
}
div.play {
animation-play-state: running;
}
// 通過JavaScript代碼將class名稱替換
var divElement = document.querySelector('div');
divElement.classList.remove('play'); // 先將class名稱移除
void divElement.offsetWidth; // 重繪，讓class名稱的修改生效
divElement.classList.add('play'); // 將class名稱替換回去，重新開始動畫

總結(jié)：無論是通過修改CSS屬性還是改變class名稱，都需要先將動畫設(shè)為none或移除class名稱，再通過一次重繪(比如獲取元素的offsetWidth屬性)來讓修改生效，最后再將原來的CSS屬性或新的class名稱重新設(shè)回去，從而觸發(fā)重新開始動畫。希望本文能對大家在實現(xiàn)CSS動畫時有所幫助。