[CSS Animation] 8. 使用 animation-play-state 來控制動畫播放的暫停或繼續

animation 已經被套用至某元素時,如果想要讓它暫停或者暫停之後繼續,就可以透過 animation-play-state 來達成。

animation-play-state 可使用的屬性值

  • running:這是預設值。即執行動畫效果。
  • paused:讓動畫效果的暫停執行。

範例

一個無限左右滑動的一個 div 區塊,若點擊的話,會暫停,再點擊的話,會恢復動畫的執行,JS 只是單純的切換 CSS 類別而已,可以操作試試看:

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of