CSS動畫是制作網(wǎng)站視覺效果的重要技術(shù)之一,能夠通過設置屬性值和關鍵幀實現(xiàn)元素的動態(tài)效果。然而,有時候我們希望動畫停住,比如在用戶交互過程中、某個條件滿足時等等。那么,如何實現(xiàn)動畫停止的效果呢?
// CSS代碼示例 .animation { animation-name: example; animation-duration: 3s; animation-iteration-count: infinite; } .stop { animation-play-state: paused; }
上述CSS代碼定義了一個名為"example"的動畫并將之應用于一個名為"animation"的元素上。該動畫擁有3秒鐘的時長并且循環(huán)播放。而當我們需要停止該動畫時,只需為該元素添加一個名為"stop" 的類,該類的作用是將動畫播放狀態(tài)置為"暫停"。這樣,我們就可以通過JavaScript控制動畫的啟停,從而實現(xiàn)更為復雜的動畫效果。