停止CSS動畫

Question

我有下面的代碼，它將鼠標懸停在容器div上時動畫圖像類。但是，如果圖像是中等動畫，並且用戶停止懸停，則動畫會暫停 - 這看起來有點奇怪。

有沒有辦法停止或恢復CSS動畫到其靜態？

.image{ 
    animation-play-state: paused; 
    } 

#container:hover .image{ 
    animation-play-state: running; 
    } 

Answer 1

在動畫播放之前獲取圖像的截圖也許嗎？ .image1 background-image：「yourimage」 } ＃容器：懸停.image {0}動畫播放狀態：正在運行; }

並將image1設置爲您的靜態圖像，並保持您的懸停爲動畫。這不是一個失敗的證據，但應該在理論上工作。