暂停动画离开 :hover 状态

Question

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

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

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

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

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

我现在写在这里，因为经过一整天的闲逛，我什至无法断定这是否真的可以使用 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;
}