取消悬停时的 CSS3 动画答案

【问题标题】：Cancel CSS3 animation on hover取消悬停时的 CSS3 动画
【发布时间】：2013-11-29 08:03:35
【问题描述】：

我正在寻找一种在 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）

【问题讨论】：

请提供一些代码（：
我尝试了animation-play-state:paused - 这有效......但是当用户停止悬停时动画恢复，这导致菜单淡出（悬停结束时）然后重新出现随着动画的继续，在最初的 3 秒后淡出。我还在悬停时尝试了 animation-duration:0 ，但它不起作用，因为它会导致动画在悬停时反复触发 - 持续时间为 0 秒 - 这会产生闪烁效果。
@Zeaklous - 添加代码 :)
像你一样暂停它似乎对我有用（我将max-height和max-width更改为height和width）。 cssdeck.com/labs/mr5zut7c
我使用最大高度和最大宽度，因为高度和宽度是可变的。我只希望它像菜单内容所需的那样宽/高 - 这会发生变化。这会改变动画的播放方式吗？

标签： css animation hover

【解决方案1】：

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

【讨论】：

不幸的是，这不起作用。虽然它确实导致菜单在悬停时保持打开状态，但它会导致菜单偶尔卡在打开状态，并且还会导致菜单在悬停时“跳转”打开，而不是使用正常悬停行为动画打开。
animation 应该首先与-webkit-、-moz-、-ms-、-o- 一起使用，因为浏览器引擎支持它们。