CSS3 :hover 動畫可以在滑鼠懸停後強製完成其循環嗎？

CSS3 動畫:hover;強制整個動畫

在 CSS3 中，常見的動畫技術是使用 :hover 來觸發元素上的動畫。但是，當遊標從元素上移開時，動畫突然停止。

問題

即使滑鼠離開元素後，:hover 上的CSS3 動畫是否可以強制繼續完整的動畫循環?

答案

不幸的是，僅CSS3 無法完成此任務。唯一的解決方案是結合使用 CSS 和 JavaScript。

JavaScript 解決方案

以下是使用 JavaScript 實作所需結果的方法：

• 將動畫加入為元素的類別。
• 一旦動畫就刪除動畫類別

$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("animated")  
})

$(".box").hover(function(){
  $(this).addClass("animated");        
})

此方法可確保動畫繼續其完整循環，無論遊標在元素上的位置如何。

以上是CSS3 :hover 動畫可以在滑鼠懸停後強製完成其循環嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！