播放CSS动画，暂停悬停了

Question

我想悬停

• 播放动画。
• 将鼠标悬停在外的暂停动画（即不回到第0帧）。

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

看到example here，当你将鼠标悬停出来，又回到第0帧

我不想用JS。

Answer 1

example jsfiddle

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

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

然后更改播放状态上悬停

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

Answer 2

运行检查的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和工作的另一个例子火狐：http://jsfiddle.net/MaY5A/694/

Answer 3

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

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

这不起作用，这不应该工作。动画速记说明覆盖animation-play-state。您需要重新排列这些字符串，使其能工作

Answer 4

我一直在寻找这样的欢迎，并@MikeM的回答让我，我需要去，并与@HellGate“对这个问题的答案的评论关于Chrome浏览器：

你需要暂停状态否则动画完成后，这是行不通的

我感兴趣的是如何暂停动画上一个PNG精灵表时，它是无效的，并继续悬停/恢复，所以接受的答案在这方面提供了帮助。

下面演示了如何在PNG Sprite Sheet（对精灵的信用，原始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; } 
}