Cancel CSS3 animation on hover

Question

I'm looking for a way to completely cancel a CSS3 animation when the div is hovered.

Currently, the div has an animation that plays when the page loads, displaying the page menu for 3 seconds and then fading it out. In addition, the same div has :hover pseudo-class applied to it which displays the menu on hover.

The problem is that if a user hovers over the menu during the animation, it still fades out after 3 seconds, then re-appears because of the :hover pseudo-class. Is there a way to stop this from happening? My goal is for the menu to display and fade out as normal if it is not hovered over - but, if the menu is hovered during those 3 seconds, for the animation to cancel and let the :hover pseudo-class control its behavior.

Here is the current keyframe, animation and hover code:

@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;}

I tried the following as mentioned in my comment below:

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

and

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

jsFiddle: http://jsfiddle.net/Zg6yR/2/
(Corrected jsFiddle thanks to Zeaklous)

Answer 1

For this, you can add animation:initial; on :hover state.