取消悬停时的 CSS3 动画

Posted 2023-03-06

【中文标题】取消悬停时的 CSS3 动画

【英文标题】：Cancel CSS3 animation on hover

【发布时间】：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.showanimation:navMenuSize 3s;

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

我尝试了以下评论中提到的以下内容：

#navMenu.show:hoveranimation-play-state:paused;

和

#navMenu.show:hoveranimation-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

我使用最大高度和最大宽度，因为高度和宽度是可变的。我只希望它像菜单内容所需的那样宽/高 - 这会发生变化。这会改变动画的播放方式吗？

【参考方案1】：

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

【讨论】：

不幸的是，这不起作用。虽然它确实导致菜单在悬停时保持打开状态，但它会导致菜单偶尔卡在打开状态，并且还会导致菜单在悬停时“跳转”打开，而不是使用正常悬停行为动画打开。

animation 应该首先与-webkit-、-moz-、-ms-、-o- 一起使用，因为浏览器引擎支持它们。