在前端開發(fā)中，CSS 動畫是實現(xiàn)頁面動態(tài)效果的重要方法之一。但有些時候，我們需要在 JavaScript 中動態(tài)修改 CSS 動畫的一些屬性，比如動畫時間、延遲時間、旋轉(zhuǎn)度數(shù)等等。下面我們來看如何使用 JavaScript 來修改 CSS 動畫屬性。

首先，我們通過 JS 獲取需要修改動畫屬性的 DOM 元素：

var element = document.getElementById("animate");

其中 "animate" 是指要修改的元素的 ID，下面以更改動畫時間為例：

element.style.animationDuration = "3s";

上面的代碼中，我們通過設(shè)置 "animationDuration" 屬性來改變動畫的執(zhí)行時間為 3 秒。

同樣的，我們也可以通過 JavaScript 動態(tài)改變動畫的延遲執(zhí)行時間：

element.style.animationDelay = "2s";

上面代碼中，我們通過設(shè)置 "animationDelay" 屬性來改變動畫的執(zhí)行延遲時間為 2 秒。

除此之外，我們還可以使用 JS 動態(tài)更改動畫執(zhí)行次數(shù)：

element.style.animationIterationCount = 3;

上面的代碼中，我們把 "animationIterationCount" 屬性設(shè)置為 3，表示動畫執(zhí)行 3 次。

最后，我們還可以利用 JS 來改變動畫的執(zhí)行方式。以下代碼實現(xiàn)了在動畫執(zhí)行完畢后停止動畫的效果：

element.style.animationFillMode = "forwards";
element.style.animationIterationCount = 1;

上面的代碼中，我們把 "animationFillMode" 屬性設(shè)置為 "forwards"，表示從最后一幀保持動畫狀態(tài)，同時把 "animationIterationCount" 屬性設(shè)置為 1，表示動畫只執(zhí)行一次。

通過以上代碼示例，我們可以看到：使用 JavaScript 可以很方便地修改 CSS 動畫的各種屬性，從而實現(xiàn)各種動態(tài)效果。