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