如何確保 CSS3 動畫在 :hover 元素退出時完成？

在 :hover 元素退出時強制 CSS3 動畫完成

:hover 狀態下的 CSS3 動畫提供了一種向元素添加互動性的優雅方式。然而，一個限制是當遊標離開元素時動畫會突然中止。以下是如何克服這個問題並強制動畫完成其執行，純粹通過CSS：

提供的動畫，彈跳，定義了一系列創建彈跳效果的關鍵幀。為了強制動畫在滑鼠退出元素後繼續播放，我們採用了一種巧妙的技術。

1. 添加一個類觸發器：
   創建一個單獨的類，例如'動畫'，及其相應的動畫（與您定義的彈跳關鍵幀相同） 。
2. 觸發動畫Hover：
   元素的:hover狀態下，不直接套用動畫，而是加入動畫類別。該類別包含實際的動畫。
3. 刪除動畫結束時的觸發器：
   使用 JavaScript 監聽動畫結束事件。動畫完成後，從元素中刪除動畫類別。這將有效地停止動畫。

這是一個修改後的範例：

<style>
@keyframes bounce { /* Same as before */ }
.animated { animation: bounce 1s; }
</style>

<div class="box">
  Hover me!
</div>

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

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

透過這個方法，即使遊標離開 .box，動畫也會繼續播放元素。請造訪更新後的 Fiddle 進行現場演示：http://jsfiddle.net/u7vXT/1。

以上是如何確保 CSS3 動畫在 :hover 元素退出時完成？的詳細內容。更多資訊請關注PHP中文網其他相關文章！