如何确保 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中文网其他相关文章！