如何確保 CSS3 懸停動畫完全完成？

懸停時的CSS3 動畫：確保完全完成

在CSS3 中，懸停動畫提供了一種視覺上吸引人的方式來增強使用者體驗。然而，當從元素上移除遊標時動畫突然停止時，會出現一個常見問題。這個問題可能會令人沮喪，尤其是當人們希望動畫運行完整過程時。

有中斷的關鍵影格動畫

提供的程式碼片段示範了觸發的簡單彈跳動畫使用 :hover 狀態。但是，正如問題中提到的，當滑鼠遊標退出元素時，動畫會過早停止。這是因為懸停動畫是基於事件的，並且僅在指定事件（在本例中為滑鼠懸停）處於活動狀態時執行。

我們不能強制執行完整動畫嗎？

不幸的是，僅使用 CSS 無法強制 CSS3 動畫繼續經過觸發事件。該規範並沒有為這種情況提供直接的解決方案。

使用 JavaScript 增強體驗

為了解決此限制，可以合併 JavaScript 來擴充懸停動畫。透過將動畫新增為類別並在動畫完成時將其刪除，我們可以確保無論滑鼠的位置如何，動畫都能完整執行。

JavaScript 程式碼實作

The以下JavaScript 程式碼解決了這個問題：

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

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

在此腳本中，動畫作為類別（「動畫」）應用，並在以下情況下刪除：動畫到達結束，即使在滑鼠離開元素後也可以完成完整的迭代。

結論

雖然純 CSS 確實無法強制過去的動畫完成觸發事件時，JavaScript的整合提供了靈活有效的解決方案來解決這個問題。透過將 CSS 動畫與 JavaScript 的事件處理功能結合，我們可以創建滿足特定要求的響應式且引人入勝的動畫。

以上是如何確保 CSS3 懸停動畫完全完成？的詳細內容。更多資訊請關注PHP中文網其他相關文章！