在web前端開發中，我們經常會使用CSS控制動畫效果，比如transition、animation等屬性。但有時需要通過JavaScript來控制CSS動畫，實現更加靈活的交互。下面我們來了解如何使用原生JS來控制CSS動畫。

// 獲取DOM節點
const box = document.querySelector('.box');
// 監聽動畫結束事件
box.addEventListener('animationend', () =>{
console.log('動畫結束了');
});
// 添加CSS類，觸發動畫
box.classList.add('animate');

以上代碼中，我們首先通過querySelector方法獲取了一個class為"box"的DOM元素。接下來，我們使用addEventListener方法監聽動畫結束事件，在動畫結束后打印一條日志。最后，我們通過classList.add方法，給DOM元素添加一個class為"animate"，從而觸發CSS動畫。

使用JavaScript控制CSS動畫，可以讓我們更加靈活地控制動畫效果。比如我們可以在某些操作觸發時，動態地添加或刪除CSS類，從而實現動畫效果的定制。同時，通過JavaScript控制CSS動畫，可以更好地與網頁中的其他元素進行交互，比如獲取某個元素的位置或大小，來實現更加復雜的動畫效果。