Animation 暂停动画，使其处于：悬停状态

我目前正在试验CSS3动画，并尝试仅使用CSS（完全没有javascript）实现全景视图

到目前为止，我获得了一种工作演示：

想法很简单：如果用户将黑色矩形悬停在边框上，则中央背景将移动

源代码：

但我没能完成它，因为当鼠标离开：hover状态时，背景会重置为初始位置。 我可以在初始状态上设置一个过渡，以使其平滑，但我希望实现的是在鼠标离开时将动画暂停在其计算（或视觉）状态，或者如果您愿意，不要将其重置为初始状态

我现在在这里写这篇文章，因为经过一整天的闲逛，我甚至不能断定这是否真的可以用CSS3动画来实现

动画填充模式：向前；似乎不起作用，也不会触发动画播放状态：在初始状态下暂停。 我想这是因为我从另一个DOM元素而不是动画元素开始动画

你能帮我吗，或者向我保证这是徒劳的尝试

---

提前非常感谢

我已经看过了，没有提到中途停止过渡。有人谈论对称反转转换，但当我最近尝试时，它的实现很差。恐怕你得回到JavaScript了

我认为这是一种风格更少、功能更强大的方式，因此可能更适合JavaScript IMO。

CSS示例：

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

---

嗨，谢谢，我想你是对的。。。CSS3动画不适合这种情况。我可能会使用这个jQuery插件：