JavaScript是一種強大的編程語言，可以用來動態操作網頁上的各種元素。而CSS動畫則提供了一種實現視覺效果的方式。現在我們來學習如何使用JavaScript啟動CSS動畫。

// 獲取元素
var element = document.getElementById("myAnimation");
// 在元素上添加class
element.classList.add("animate");
// 監聽動畫結束事件
element.addEventListener("animationend", function() {
// 動畫結束后執行的代碼
console.log("Animation ended");
});

在上面的代碼中，我們首先獲取元素并將其存儲在變量element中。然后，我們使用classList.add()方法將類名“animate”添加到元素上。這個類名將觸發CSS中的動畫效果。最后，我們使用addEventListener()方法監聽動畫結束事件，并在事件觸發時執行一些代碼。

現在，讓我們來看一下CSS代碼，它實現了一個簡單的旋轉動畫：

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

在這個代碼塊中，我們定義了一個名為“spin”的動畫效果，該效果將使元素旋轉360度。我們將這個動畫效果附加到“animate”類中，并將其應用到我們在JavaScript中獲取的元素上。

現在，當我們執行JavaScript代碼時，元素將開始旋轉，直到動畫結束。這演示了如何使用JavaScript來啟動CSS動畫。