animation - 暂停动画留下 :hover state

Question

我目前正在试验 CSS3 动画，并尝试仅使用 CSS(根本没有 javascript)实现全景 View 。

到目前为止，我获得了一个可以正常工作的演示: http://www.yagraph.org/images/panoramic/

想法很简单:如果用户将黑色矩形悬停在边框中，中心背景就会移动。

源代码: www.yagraph.org/images/panoramic/sources-pano.zip

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

我现在写在这里，因为经过一整天的闲逛，我什至无法断定这是否真的可以用 CSS3 动画实现...!

动画填充模式:向前；似乎不起作用，既不触发 animation-play-state: paused on the initial state。我想这是因为我从另一个 DOM 元素而不是动画元素开始动画...

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

提前致谢

Answer 1

我已经浏览了 CSS3 Transitions Specification ，并且没有提到中途停止转换。有关于对称反转过渡的讨论，但是当我最近尝试时，它实现得很差。所以恐怕你将不得不回到 JavaScript。

我认为这无论如何都没有那么风格化而且更实用，所以可能更适合 JavaScript IMO。