CSS是網頁設計中不可或缺的技術，它可以幫助我們實現網頁的美化、布局以及動畫等效果。而動畫在網頁設計中扮演著重要的角色，但有時我們也需要停止動畫的播放。本文將介紹CSS停止動畫的方法。 停止CSS動畫的方法主要有兩種，分別是使用JavaScript和使用CSS。 1.使用JavaScript停止動畫 假設我們有一個名為“animate”的CSS動畫類，可以在任何元素上使用它來實現動畫效果。 首先，在CSS中定義該類：

.animate {
animation: animate 2s infinite;
}
@keyframes animate {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}

通過上面的代碼，我們定義了一個從左到右平移的動畫，并且設置了循環播放（infinite）。 然后，在JavaScript中，獲取該元素，并停止它的動畫：

// 獲取元素
const element = document.getElementById('animate-element');
// 停止動畫
element.style.animationPlayState = 'paused';

這里我們使用了animationPlayState屬性，設置為paused即可停止動畫的播放。 2.使用CSS停止動畫 另一種方法是使用CSS本身來停止動畫。我們可以給需要停止動畫的元素添加一個類，來覆蓋原有的動畫屬性。

.stop-animation {
animation-name: none !important;
}

上述代碼將動畫名稱設置為none，加上!important來覆蓋其他與此沖突的聲明。 在需要停止動畫的時候，只需要給該元素加上該類即可：

const element = document.getElementById('animate-element');
element.classList.add('stop-animation');

總結 以上介紹了兩種CSS停止動畫的方法：使用JavaScript和使用CSS本身。通過這兩種方法，我們可以靈活地控制動畫的播放和停止，達到更好的網頁設計效果。