在CSS3中,您可以使用animation-play-state
屬性來(lái)暫停動(dòng)畫(huà),該屬性接受兩個(gè)值:running
和paused
,默認(rèn)情況下,動(dòng)畫(huà)處于running
狀態(tài),即動(dòng)畫(huà)會(huì)持續(xù)播放,如果您想暫停動(dòng)畫(huà),可以將animation-play-state
設(shè)置為paused
。
假設(shè)您有一個(gè)名為my-animation
的CSS3動(dòng)畫(huà),您可以使用以下代碼來(lái)暫停它:
#my-element { animation-play-state: paused; }
這將使名為my-element
的元素上的my-animation
動(dòng)畫(huà)暫停播放,如果您想恢復(fù)動(dòng)畫(huà)的播放,可以將animation-play-state
設(shè)置回running
:
#my-element { animation-play-state: running; }
animation-play-state
屬性僅適用于CSS3動(dòng)畫(huà),而不適用于其他類(lèi)型的動(dòng)畫(huà)(如JavaScript動(dòng)畫(huà)),該屬性僅影響當(dāng)前正在播放的動(dòng)畫(huà),不會(huì)影響尚未開(kāi)始的動(dòng)畫(huà)。
除了使用animation-play-state
屬性外,您還可以使用JavaScript來(lái)暫停和恢復(fù)CSS3動(dòng)畫(huà),您可以使用element.style.animationPlayState
來(lái)獲取或設(shè)置元素的動(dòng)畫(huà)播放狀態(tài),以下是一個(gè)簡(jiǎn)單的示例:
var element = document.getElementById('my-element'); element.style.animationPlayState = 'paused'; // 暫停動(dòng)畫(huà) element.style.animationPlayState = 'running'; // 恢復(fù)動(dòng)畫(huà)播放
希望這些信息對(duì)您有所幫助!