在網(wǎng)頁(yè)設(shè)計(jì)中，動(dòng)畫效果已經(jīng)成為了必備元素，可以增加網(wǎng)頁(yè)的趣味性和互動(dòng)性，提高用戶體驗(yàn)。而使用JavaScript添加CSS動(dòng)畫效果是較為常見的一種方法。

首先，需要了解CSS動(dòng)畫的基本語法。可以使用@keyframes來定義動(dòng)畫的關(guān)鍵幀，再通過animation屬性來將動(dòng)畫應(yīng)用于元素。例如：

@keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
.element {
animation-name: example;
animation-duration: 1s;
}

以上代碼定義了一個(gè)名為example的動(dòng)畫，從0%的透明度到100%的透明度，再將其應(yīng)用于名為element的元素，持續(xù)時(shí)間為1秒。

接下來，使用JavaScript來控制動(dòng)畫的播放和停止。可以使用以下代碼實(shí)現(xiàn)：

var element = document.querySelector(".element");
element.classList.add("animate");
setTimeout(function() {
element.classList.remove("animate");
}, 1000);

以上代碼首先獲取名為element的元素，并通過classList.add方法添加名為animate的類，使其應(yīng)用動(dòng)畫。隨后，通過setTimeout方法設(shè)置一定時(shí)間后，再通過classList.remove方法移除animate類，停止動(dòng)畫的播放。

除了使用setTimeout方法，還可以使用JavaScript中的動(dòng)畫函數(shù)如requestAnimationFrame來控制動(dòng)畫的播放，實(shí)現(xiàn)更加流暢的效果。

最后，需要注意的是，添加過多的動(dòng)畫效果會(huì)降低網(wǎng)頁(yè)的性能，影響用戶體驗(yàn)。因此，在添加動(dòng)畫效果時(shí)需適度控制。