如何防止 CSS3 懸停動畫在滑鼠退出時過早停止？

保留滑鼠退出時由:hover 觸發的CSS3 動畫

在元素的:hover 狀態上使用CSS3 動畫時，通常會遇到滑鼠遊標離開元素時動畫突然終止的問題。如果您希望無論滑鼠是否存在，動畫都能完成其自然持續時間，則這種行為可能是不可取的。

解決方案：合併 JavaScript

不幸的是，沒有標準化的 CSS 解決方案對於這個要求。要克服此限制，您可以合併一些 JavaScript，如下所示：

1. 指派動畫類別： 將動畫類別新增至包含所需動畫的元素。
2. 處理動畫結束事件：為動畫結束事件附加一個事件監聽器，各種動畫都支援該事件監聽器
3. 移除動畫類別： 在事件監聽器內，從元素中移除動畫類，讓動畫完成其執行。
4. 觸發動畫on href:修改懸停處理程序以在元素懸停時將動畫類別新增至元素

範例：

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

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

此程式碼將事件偵聽器附加到動畫結束事件，並從元素中刪除“動畫”類別它的完成。此外，當元素懸停在其上方時，它會添加相同的動畫類別。

以上是如何防止 CSS3 懸停動畫在滑鼠退出時過早停止？的詳細內容。更多資訊請關注PHP中文網其他相關文章！