在前端開發中，使用CSS動畫可以讓網頁變得更加生動和吸引人。然而，在某些情況下，我們需要在動畫完成后執行一些操作，比如說切換CSS類來改變網頁元素的樣式。但是，如何監聽CSS動畫的完成呢？

/*CSS動畫*/
@keyframes slideRight{
0%{transform:translateX(0)}
100%{transform:translateX(100%)}
}
/*動畫完成后要執行的操作*/
function doSomething(){
//...
}
/*使用JavaScript監聽動畫完成*/
var animation = document.querySelector("#someElement").animate([
{transform: "translateX(0px)"},
{transform: "translateX(100px)"}
],{
duration:1000,
fill:"forwards",
easing:"ease-in-out"
});
animation.addEventListener("finish",function(){
doSomething();
});

在上面的代碼中，我們定義了一個名為slideRight的CSS動畫，該動畫會將元素從左到右移動。接著，我們定義了一個doSomething函數，該函數會在動畫完成后被調用。最后，我們使用JavaScript獲取元素并使用animate()方法來啟動CSS動畫。我們將動畫的fill屬性設置為"forwards"，以便于保持動畫結束時的樣式，再將其easing屬性設置為"ease-in-out"，使動畫變得平滑。接著，我們調用addEventListener()方法來監聽動畫的完成事件，并在動畫完成后執行doSomething()函數。

總之，上面這段代碼是一種在JavaScript中監聽CSS動畫完成的方法。如果你需要在動畫完成后執行某些操作，請嘗試使用此方法。相信它能幫助你提升網頁的交互性和美觀度。