CSS3 :hover 动画可以在鼠标悬停后强制完成其循环吗？-css教程-PHP中文网

CSS3 :hover 动画可以在鼠标悬停后强制完成其循环吗？

Patricia Arquette

发布： 2024-12-03 20:29:13

原创

608 人浏览过

Can CSS3 :hover Animations Be Forced to Complete Their Cycle After Mouseout?

CSS3 动画:hover;强制整个动画

在 CSS3 中，常见的动画技术是使用 :hover 来触发元素上的动画。但是，当光标从元素上移开时，动画突然停止。

问题

即使在鼠标离开元素后，:hover 上的 CSS3 动画是否可以强制继续完整的动画循环?

答案

不幸的是，仅 CSS3 无法完成此任务。唯一的解决方案是结合使用 CSS 和 JavaScript。

JavaScript 解决方案

以下是使用 JavaScript 实现所需结果的方法：

将动画添加为元素的类。
一旦动画就删除动画类

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

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

登录后复制

此方法可确保动画继续其完整循环，无论光标在元素上的位置如何。

以上是CSS3 :hover 动画可以在鼠标悬停后强制完成其循环吗？的详细内容。更多信息请关注PHP中文网其他相关文章！