暂停动画，留下：悬停状态

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 IMO。

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