播放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; } 
}