.jpg)
暫停html動(dòng)畫其實(shí)不難，關(guān)鍵在于使用 animation-play-state 這個(gè)css屬性。它允許你控制正在運(yùn)行的動(dòng)畫是否暫停或繼續(xù)播放。
1. animation-play-state 的基本用法
這個(gè)屬性有兩個(gè)常用值：
- running：動(dòng)畫正常播放
- paused：動(dòng)畫暫停（保持當(dāng)前狀態(tài)）
你可以通過修改元素的樣式來切換這兩個(gè)狀態(tài)。例如：
.box { animation: move 2s infinite; } .paused { animation-play-state: paused; }
然后在HTML中，給元素添加或移除 .paused 類就可以控制動(dòng)畫是否暫停。
2. 結(jié)合JavaScript實(shí)現(xiàn)點(diǎn)擊暫停/播放
實(shí)際開發(fā)中，我們通常希望用戶能通過點(diǎn)擊按鈕來控制動(dòng)畫。這就需要JavaScript來動(dòng)態(tài)操作類名或樣式。
比如，HTML結(jié)構(gòu)如下：
<div class="box" id="animatedBox"></div> <button id="pauseBtn">暫停</button> <button id="playBtn">播放</button>
對(duì)應(yīng)的JS邏輯可以這樣寫：
const box = document.getElementById('animatedBox'); const pauseBtn = document.getElementById('pauseBtn'); const playBtn = document.getElementById('playBtn'); pauseBtn.addEventListener('click', () => { box.style.animationPlayState = 'paused'; }); playBtn.addEventListener('click', () => { box.style.animationPlayState = 'running'; });
注意：如果你用了多個(gè)動(dòng)畫（比如 animation-name: anim1, anim2），那么 animation-play-state 會(huì)同時(shí)影響所有動(dòng)畫的狀態(tài)。
3. 常見問題和注意事項(xiàng)
有時(shí)候你會(huì)發(fā)現(xiàn)設(shè)置了 animation-play-state: paused 沒有效果，這可能是因?yàn)椋?/p>
- 動(dòng)畫沒有真正開始：比如動(dòng)畫持續(xù)時(shí)間為0，或者 animation-delay 太長還沒執(zhí)行到。
- 使用了簡(jiǎn)寫屬性但覆蓋了其他設(shè)置：比如寫了 animation: none; 或者重復(fù)定義導(dǎo)致沖突。
- 動(dòng)畫已經(jīng)結(jié)束了：如果是非循環(huán)動(dòng)畫（animation-iteration-count: 1），那暫停就沒意義了。
建議的做法是：
- 明確指定 animation-name、animation-duration 等屬性，避免簡(jiǎn)寫帶來的副作用。
- 用瀏覽器開發(fā)者工具檢查元素最終應(yīng)用的樣式，確認(rèn) animation-play-state 是否生效。
4. 更高級(jí)的控制方式（可選）
除了直接操作 animation-play-state，還可以通過移除整個(gè) animation 屬性來“停止”動(dòng)畫。但這種方式相當(dāng)于完全清除動(dòng)畫，再恢復(fù)時(shí)就得重新觸發(fā)一次動(dòng)畫流程。
相比之下，animation-play-state 更輕量，適合臨時(shí)暫停。
基本上就這些。用起來不復(fù)雜，但要確保動(dòng)畫本身是正確配置的，否則暫停也不會(huì)起作用。
.png)
