暫停動畫離開：懸停狀態

Question

我目前正在嘗試使用CSS3動畫，並嘗試使用CSS實現全景（僅限於JavaScript）。

到目前爲止我獲得排序的，工作演示： http://www.yagraph.org/images/panoramic/

的想法很簡單：如果用戶在懸停邊框黑色矩形，中央背景的舉動。

源代碼： www.yagraph.org/images/panoramic/sources-pano.zip

但我無法完成它，因爲當鼠標離開：懸停狀態，背景重置爲初始位置。 我可以在初始狀態下進行轉換以平滑轉換，但是我希望實現的是在鼠標離開時暫停其計算（或視覺）狀態的動畫，或者如果您願意，不要重置它到其初始狀態。

我現在寫在這裏，因爲經過一整天的嘲弄，我甚至無法斷定這是否真的可以用CSS3動畫... ...！

動畫填充模式：轉發;看起來不起作用，既不觸發動畫播放狀態：暫停在初始狀態。 我想這是因爲我從另一個DOM元素開始動畫而不是動畫的動畫...

你能幫助我，還是向我保證這是徒勞的嘗試？

感謝很多提前

Answer 1

我已經通過CSS3 Transitions Specification一看，而且也沒有通過停止部分過渡的方式提及。有談話對稱地顛倒過渡，但是當我最近嘗試時，它實施得不好。所以你恐怕不得不回到JavaScript。

我認爲這是不太文體和更多的功能無論如何，所以可能更適合JavaScript國際海事組織。

Answer 2

Pausing Animation css3

範例CSS：

button:hover .icon{ 
    -webkit-animation-play-state:paused; /* Webkit Browsers */ 
    -moz-animation-play-state:paused; /* Firefox*/ 
    animation-play-state:paused; 
}