在前端開發(fā)中，CSS動畫是非常常見的。但是有時候我們希望用戶在按下一個按鍵時可以重播CSS動畫。這個功能可以通過鍵盤事件和JavaScript代碼實現(xiàn)。接下來我們將詳細介紹如何實現(xiàn)。

首先我們需要寫CSS動畫代碼，以下以一個簡單的旋轉(zhuǎn)動畫為例：

.rotate {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

以上代碼表示一個有限期為2秒的無限循環(huán)的旋轉(zhuǎn)動畫。我們要實現(xiàn)的是按下某個按鍵之后，這個動畫可以重新播放。

接下來我們將介紹如何使用JavaScript代碼捕捉鍵盤事件。我們需要添加以下代碼：

document.addEventListener("keydown", function(event) {
if (event.keyCode === 32) { // 32代表空格鍵
event.preventDefault(); // 防止頁面滾動
var el = document.querySelector('.rotate');
el.classList.remove('rotate');
void el.offsetWidth;
el.classList.add('rotate');
}
});

以上代碼捕捉了鍵碼為32的鍵盤事件（即空格鍵）。當用戶按下空格鍵時，它將創(chuàng)建一個指向我們的元素的el變量。

我們首先要移除CSS類，然后重新添加它以重新啟動動畫。 void操作符是使瀏覽器強制重新計算渲染某個元素。它可以防止瀏覽器緩存舊的動畫值。

在上述JavaScript代碼中，我們使用了classList來添加和刪除類。classlist允許我們更直觀地在JavaScript中管理CSS類，它比在元素上使用className屬性更方便。

最后需要在HTML中添加一個div元素，其類為“rotate”，如下：

這個div元素將顯示旋轉(zhuǎn)動畫，空格鍵按下后動畫將重啟。

總的來說，實現(xiàn)按鍵重播CSS動畫很簡單。我們只需要捕捉鍵盤事件并使用CSS類和JavaScript代碼控制動畫狀態(tài)即可。