CSS3 動畫是在網頁設計中常用的技術之一，它可以讓網頁更加生動，給用戶帶來更好的體驗。在使用 CSS3 動畫的過程中，我們經常需要控制動畫的播放方式，比如重新播放動畫。今天，我們就來學習一下如何使用 CSS3 動畫重新播放。

我們可以使用 CSS3 的 animation-play-state 屬性來控制動畫的播放狀態(tài)，這個屬性有兩個值：running 和 paused。running 表示動畫正在播放中，paused 表示動畫已經暫停。

/* 通過指定 animation-play-state 來控制動畫播放狀態(tài) */
.element {
animation-play-state: running; /* 播放 */
}
.element:hover {
animation-play-state: paused; /* 暫停 */
}

為了重新播放動畫，我們需要將動畫的播放狀態(tài)從 paused 改為 running。有兩種方式可以實現(xiàn)這個功能：

/* 方法一：通過通過 JavaScript 修改 animation-play-state 屬性 */
const element = document.querySelector('.element');
element.style.animationPlayState = 'running';
/* 方法二：通過為元素添加一個新的 class 來觸發(fā)重新播放動畫 */
.element {
animation-play-state: running; /* 播放 */
}
/* 注意要在 JS 中動態(tài)地為元素添加 .restart 類名 */
.element.restart {
animation: none; /* 先將動畫清空 */
animation: myAnimation 2s linear forwards; /* 再重新播放動畫 */
}
const element = document.querySelector('.element');
element.classList.add('restart');

以上就是關于 CSS3 動畫重新播放的內容，希望能對大家有所幫助。