Css 動畫可以讓網站變得更加生動有趣，同步音頻播放則使用戶更加沉浸感。那么如何利用 CSS 動畫同步音頻播放呢？其實非常簡單，我們只需要利用 JavaScript 來處理就好。

// 獲取音頻元素
const audio = document.getElementById('audio');
// 獲取動畫元素
const animate = document.getElementById('animate');
// 監聽音頻播放過程中的時間變化
audio.addEventListener('timeupdate', () =>{
// 獲取當前音頻播放進度
const currentTime = audio.currentTime;
// 設置動畫元素的播放時間
animate.style.animationPlayState = 'running';
animate.style.animationDelay = `-${currentTime}s`;
});

上述代碼中，我們首先獲取了音頻元素和動畫元素，然后監聽音頻播放時間變化。每次時間變化時，我們獲取當前音頻播放進度，并根據這個進度設置動畫元素的播放時間（也就是開始播放的延時時間）。這樣，動畫元素就能夠與音頻播放進度同步了。

除了以上代碼，還需要在 CSS 中設置好動畫效果（例如：animation-name、animation-duration、animation-timing-function 等屬性），這里就不再贅述。

總結一下，利用 CSS 動畫同步音頻播放非常簡單，只需要使用 JavaScript 監聽音頻播放進度并設置動畫元素的播放時間即可。希望這篇文章能夠幫助讀者更好地利用 CSS 動畫，實現更加生動有趣的網站體驗。