CSS動畫是網頁設計中重要的一部分，它可以為網站帶來更豐富的視覺體驗和更高的用戶友好度。但有時候動畫播放的控制需要通過JavaScript來實現。

實現CSS動畫控制的方式有很多種，我們可以通過添加、刪除CSS類名或者直接修改CSS屬性來控制動畫的播放，但最常用的一種方法是使用animation-play-state屬性來控制動畫的播放狀態。

/* 假設我們已經有了一個名為 "animated" 的CSS動畫 */
/* JS代碼 */
var animatedObj = document.querySelector(".animated");
function pauseAnimation() {
animatedObj.style.WebkitAnimationPlayState = "paused";
animatedObj.style.animationPlayState = "paused";
}
function resumeAnimation() {
animatedObj.style.WebkitAnimationPlayState = "running";
animatedObj.style.animationPlayState = "running";
}
/* HTML代碼 */
<div class="animated">我是一個有趣的元素</div>
<button onclick="pauseAnimation()">暫停</button>
<button onclick="resumeAnimation()">繼續</button>

在上面的代碼中，我們首先獲取了一個名為 "animated" 的元素，然后定義了兩個函數pauseAnimation()和resumeAnimation()，分別控制CSS動畫的暫停和播放。在這兩個函數中，我們使用JavaScript來動態修改animation-play-state屬性的值，通過將其設置為 "paused" 或 "running" 來控制動畫的播放狀態。

最后，我們在HTML代碼中添加了兩個按鈕，分別觸發pauseAnimation()和resumeAnimation()函數，通過JS代碼來實現動畫播放的控制。