悬停时暂停 WebKit 动画

Posted 2023-03-06

【中文标题】悬停时暂停 WebKit 动画

【英文标题】：Pause a WebKit animation on hover

【发布时间】：2013-12-01 21:23:55

【问题描述】：

我正在尝试让动画在鼠标悬停时暂停：

.quote:nth-child(1):hover 
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;

但它不想暂停。谁能看到我做错了什么？

JSFIDDLE

【参考方案1】：

代替：

.quote:nth-child(1):hover 

    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;

使用：

.quote-wrapper:hover .quote 

    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;

演示：http://jsfiddle.net/j4Abq/2/

【讨论】：

谢谢汤姆。这几乎是完美的。我发现的问题是，如果我不让每个引号在悬停/暂停之前循环，它似乎会弄乱动画。我试过移动悬停命令（在黑暗中拍摄），但这无济于事。有什么想法吗？

这只会在动画处于任何状态时暂停动画，我不确定你能做些什么来改变它。也许尝试将其作为一个新问题提出？祝你好运。

谢谢汤姆！这似乎解决了问题。

你还应该使用：-ms-animation-play-state: "paused";适用于 IE8 和 IE9。

这来了，我调整了这个答案，起初它在任何浏览器中都不起作用。 （我正在尝试在许多单独元素的鼠标悬停时使用 javascript 应用 .paused 样式。在我的情况下，我只需将 !important 添加到每行的末尾。因为人们可能会将您的答案用于类似目的，您可以将其添加到您的答案中，使其比评论更突出。animation-play-state: paused !important;

【参考方案2】：

我可以看到似乎找到了解决方案。但是，我提供了另一种简单的解决方案来解决暂停动画并重新开始的问题。

为了“暂停”并返回动画的初始状态，请使用：

<selector>:hover 
    animation: step-end;

我有一个动画正在运行，它无限地将字体颜色从深色变为浅色，当我使用“step-end”将鼠标悬停在它上面时，动画暂停并立即切换到初始深色，然后在指针移动时恢复离开。

希望这可以帮助其他人。 :-)