暂停动画离开：悬停状态

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