Question

我正在寻找一种在div悬停时完全取消CSS3动画的方法。

目前，div有一个动画，当页面加载时播放，显示页面菜单3秒然后淡出。另外，同一个div有：hover伪类应用于它，它在悬停时显示菜单。

问题是如果用户在动画期间悬停在菜单上，它在3秒后仍会淡出，然后由于：hover伪类重新出现。有没有办法阻止这种情况发生？我的目标是如果菜单没有悬停，菜单就会正常显示和淡出 - 但是，如果菜单在这3秒内徘徊，动画取消并让：hover伪类控制其行为。 / p>

这是当前的关键帧，动画和悬停代码：

@keyframes navMenuSize{
  0%{max-width:100%;max-height:1400%;opacity:1;}
  70%{max-width:100%;max-height:1400%;opacity:1;}
  85%{max-width:100%;max-height:100%;opacity:1;}
  100%{max-width:0;max-height:100%;opacity:0;}
}

#navMenu.show{animation:navMenuSize 3s;}

#navMenu:hover{max-width:100%;max-height:1400%;opacity:1;transition:all 0.5s ease-in-out;}

我在下面的评论中提到了以下内容：

#navMenu.show:hover{animation-play-state:paused;}

和

#navMenu.show:hover{animation-duration:0;}

jsFiddle：http://jsfiddle.net/Zg6yR/2/
（通过Zeaklous修正了jsFiddle）

Answer 1

为此，您可以在animation:initial;州添加:hover。

在悬停时取消CSS3动画

1 个答案: