在 CSS 動畫中,有一個很實用的特性即懸停暫停。意思是,在鼠標懸停在動態元素上時,動畫會暫停播放,鼠標離開則恢復播放。這個特性很容易實現,只需要添加 CSS 屬性“transition: pause”即可。
/* 定義動畫 */ .animation { width: 100px; height: 100px; background-color: blue; position: relative; left: 0; transition: left 2s; } /* 懸停時暫停動畫 */ .animation:hover { transition-play-state: paused; }
上述代碼定義了一個簡單的動畫,元素橫向移動。當鼠標懸停在該元素上時,動畫停止播放,元素將保持在懸停時的位置。當鼠標離開時,動畫恢復播放,元素繼續移動。
需要注意的是,該特性僅適用于使用過渡、動畫和滾動動畫相關 CSS 屬性的元素。如果你想要暫停其他類型的動畫,比如 JS 編寫的動畫,需要使用 JavaScript 來實現。