CSS動(dòng)畫是網(wǎng)頁中常用的元素之一，但有時(shí)候需要暫停動(dòng)畫，下面讓我們看看如何使用CSS暫停動(dòng)畫。
在CSS中，可以使用以下兩個(gè)屬性來控制動(dòng)畫的播放和暫停：
<style>.animate {
animation: 2s infinite slidein;
}
.pause{
animation-play-state: paused;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
</style>如上面這段代碼所示，我們首先定義一個(gè)名為.animate的類，它有一個(gè)2秒的動(dòng)畫，它會(huì)不斷地向右移動(dòng)，并且寬度會(huì)增加3倍。
現(xiàn)在，我們想在用戶單擊按鈕時(shí)暫停動(dòng)畫，我們只需要定義另一個(gè)名為.pause的類，該類負(fù)責(zé)將animation-play-state屬性設(shè)置為paused。這個(gè)屬性有兩種狀態(tài)：running(運(yùn)行中)和paused(已暫停)，默認(rèn)狀態(tài)是running。
當(dāng)您想要暫停動(dòng)畫時(shí)，只需將暫停按鈕的class從animation中刪除，添加到pause中即可：
<button onclick="document.getElementById('myAnimation').classList.toggle('pause')">Pause<div id="myAnimation" class="animate">如上所述，只需在按鈕單擊事件中將.animation中的class切換為.pause。 這將導(dǎo)致動(dòng)畫停止播放并保持當(dāng)前狀態(tài)。
現(xiàn)在，您已經(jīng)知道如何使用CSS暫停動(dòng)畫了！通過類切換或其他事件處理程序，您可以輕松控制動(dòng)畫的播放和暫停。