在現代網站中，CSS 動畫已經成為了不可或缺的一部分。 它們可以幫助您創建流暢而優雅的交互效果，從而增強用戶體驗。

但是，一個常見的問題是：如何實現一個可以點擊重新播放的 CSS 動畫？

答案是使用 JavaScript ！下面是一個簡單的示例：

const myAnimation = document.querySelector('.my-animation');
myAnimation.addEventListener('click', function() {
myAnimation.classList.remove('animate');
void myAnimation.offsetWidth; // trigger reflow
myAnimation.classList.add('animate');
});

這段 JavaScript 代碼將監聽包含 CSS 動畫的元素的點擊事件。 當單擊時，它將從元素中刪除 “animate” 類，然后重新添加它。 這將導致動畫在重新啟動之前重新設置其初始狀態。

此外，使用void element.offsetWidth;方法將強制瀏覽器重新渲染元素，從而確保動畫將在重新啟動之前計算到其原始狀態。

現在，只需確保您的 CSS 動畫設置正確，并為帶有可點擊元素類的包含容器添加 “my-animation” 類。

當然，您可以根據需要對此代碼進行更改或擴展，以適應您的具體需求。 但是，這個基本的解決方案應該足以幫助您起步，通過向您的網站添加有趣的、動態的效果，增強用戶的感官體驗。