css - 悬停时取消 CSS3 动画

Question

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

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

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

这是当前的关键帧、动画和悬停代码:

@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

为此，您可以在 :hover 状态上添加 animation:initial;。