CSS動畫 - 停止懸停，並返回到開頭的動畫相同的方式

Question

我正在網站上播放動畫，當您將鼠標懸停在某些元素上時，我無法將動畫返回到它是一種原始狀態，它不會在元素懸停後「硬切」。 我要求的是，有沒有辦法讓動畫在懸停後向後播放？我正在使用animation-fill-mode：forwards;在用戶懸停在元素上時使動畫保持原位。任何答案都會有幫助，無論是使用CSS或JavaScript的解決方案。

Answer 1

在大多數情況下，你可以不喜歡

element { 
//animate the original state 
} 

element:hover { 
//animate to another state 
} 

只要你element塊定義動畫是visually opposite即如果hover順時針旋轉，這些應該是逆時針方向;它應該給你想要的效果。

對於您的使用案例，請張貼小提琴。