在CSS中,您可以使用animation-play-state
屬性來暫停動畫,該屬性接受兩個值:running
和paused
,默認情況下,動畫處于running
狀態(tài),即動畫會持續(xù)播放,如果您想暫停動畫,可以將animation-play-state
設置為paused
。
假設您有一個名為my-animation
的動畫,您可以使用以下CSS代碼來暫停它:
.my-element { animation-play-state: paused; }
這將使名為my-animation
的動畫在.my-element
上暫停播放,如果您想恢復動畫的播放,可以將animation-play-state
設置回running
:
.my-element { animation-play-state: running; }
animation-play-state
屬性僅適用于使用CSS動畫關鍵幀定義的單幀動畫,對于使用JavaScript編寫的動畫,您可能需要使用其他方法來暫停和恢復動畫的播放。
CSS中的動畫暫停功能可能因瀏覽器而異,某些瀏覽器可能不支持animation-play-state
屬性,或者支持它的方式不同,在使用CSS動畫暫停功能時,請確保在目標瀏覽器上進行測試以確保兼容性。