在CSS中,可以使用animation-play-state
屬性來使動畫停止,該屬性有兩個值:running
和paused
,默認情況下,動畫的animation-play-state
值為running
,表示動畫正在播放,如果想要使動畫停止,可以將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; }
如果你想要在JavaScript中控制動畫的播放和停止,可以使用element.style.animationPlayState
屬性。
var element = document.getElementById('my-element'); element.style.animationPlayState = 'paused'; // 停止動畫 element.style.animationPlayState = 'running'; // 啟動動畫
這種方法只在支持CSS動畫的瀏覽器中使用有效,如果你需要更廣泛的瀏覽器支持,可以考慮使用其他方法或庫來控制動畫的播放和停止。