悬停时播放 CSS 动画，悬停时暂停

Posted 2023-03-06

【中文标题】悬停时播放 CSS 动画，悬停时暂停

【英文标题】：Play CSS animation on hover, pause on hover out

【发布时间】：2012-02-09 04:08:35

【问题描述】：

我正在尝试

悬停时播放动画。 悬停时暂停动画（即不返回到第 0 帧）。

不能在父div上使用-webkit-animation-play-state: paused;吗？

查看example here，当您将鼠标悬停时，它会返回到第 0 帧。

我不想用 JS。

【参考方案1】：

example jsfiddle

在#tech 上设置动画，播放状态暂停

#tech 
    -webkit-animation-play-state:paused;
    -webkit-animation: moveSlideshow 10s linear infinite;

然后将播放状态更改为悬停运行

#tech:hover
    -webkit-animation-play-state:running;

【讨论】：

谢谢，不敢相信我错过了，roXon 你需要 -moz 前缀为 firefox

我知道...只是在演示中更改它。 （上面的编辑评论）

它在 Chrome 下不起作用。图像一直在移动。

动画后需要暂停状态，否则无效

【参考方案2】：

我也在寻找这个，@MikeM 的回答让我到达了我需要去的地方，@HellGate 对关于 Chrome 的回答的评论：

你需要动画之后的暂停状态，否则它不起作用

我对如何在 PNG 精灵表处于非活动状态时暂停动画并在悬停时继续/恢复感兴趣，因此接受的答案在这方面有所帮助。

这是一个演示，展示了如何在 PNG Sprite Sheet 上完成此操作（感谢 sprite，原始 CSS 归 Guil Hernandez 和他的精彩博文 here）：CodePen。

重要的 CSS 部分：

.monster 
  width: 190px;
  height: 240px;
  margin: 2% auto;
  background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
  -webkit-animation: monsterAnimation .8s steps(10) infinite;
  animation: monsterAnimation .8s steps(10) infinite;
  -webkit-animation-play-state: paused;  /* Chrome, Safari, Opera */
  animation-play-state: paused;


.monster:hover 
  -webkit-animation-play-state: running;
  animation-play-state: running;


@keyframes monsterAnimation 
  100%  background-position: -1900px; 

【参考方案3】：

在此处查看 JSFiddle：http://jsfiddle.net/fRzwS/373/。

动画不会停止，因为animation 的后期定义覆盖了属性animation-play-state 的值。根据W3C specification，animation：

The 'animation' shorthand property is a comma-separated list of 
  animation definitions, each of which combines seven of 
  the animation properties into a single component value.

这七个属性是：

<single-animation> = <single-animation-name> || <time> 
  || <single-animation-timing-function> 
  || <time> || <single-animation-iteration-count> || <single-animation-direction> 
  || <single-animation-fill-mode> || <single-animation-play-state>

类似于属性background和background-color。

所以在原代码中：

#tech 
    -webkit-animation-play-state: paused;
    -webkit-animation: moveSlideshow 10s linear infinite;

属性animation-play-state 设置为paused。但是，后期属性animation 会通过其默认值running 覆盖此值。因此，您可以稍后定义属性animation-play-state (http://jsfiddle.net/fRzwS/373/)：

#tech 
    -webkit-animation: moveSlideshow 10s linear infinite;
    -webkit-animation-play-state:paused;

或者您可以简单地使用 (http://jsfiddle.net/fRzwS/374/)：

-webkit-animation: moveSlideshow 10s linear infinite paused;

---

这是另一个适用于 Chrome 和 Firefox 的示例：http://jsfiddle.net/MaY5A/694/

【参考方案4】：

我没有足够的声誉来评论其他答案。好吧。 @MikeM 的方法有效，但他犯了一个小错误。看：

#tech 
    -webkit-animation-play-state:paused;
    -webkit-animation: moveSlideshow 10s linear infinite;

这不起作用，也不应该起作用。动画速记笔记覆盖animation-play-state。您需要重新排序这些字符串才能使其正常工作