暂停动画并保持 :hover 状态
我目前正在尝试使用 CSS3 动画，并尝试仅使用 CSS 实现全景视图（根本不需要 JavaScript）。
到目前为止，我获得了一个可以运行的演示： http://www.yagraph.org/images/panoramic/
这个想法很简单：如果用户将鼠标悬停在边框中的黑色矩形上，中央背景移动。
源代码 ： www.yagraph.org/images/panoramic/sources-pano.zip
但我没能完成它，因为当鼠标离开 :hover 状态时，背景会重置到其初始位置。 我可以在初始状态上进行转换以使其平滑，但我希望实现的是当鼠标离开时将动画暂停在其计算（或视觉）状态，或者如果您愿意，不要将其重置为它的初始状态。
我现在写在这里，是因为经过一整天的摸索之后，我什至无法断定这是否真的可以通过 CSS3 动画实现......！
动画填充模式：向前；似乎不起作用，也没有触发动画播放状态：在初始状态上暂停。 我想这是因为我从另一个 DOM 元素而不是动画元素开始动画......
你能帮助我，或者向我保证这是一次徒劳的尝试吗？
预先非常感谢
I'm currently experimenting with CSS3 Animations, and try to achieve a Panoramic view with CSS only (no javascript at all).
So far I obtain a sort-of-working demo :
http://www.yagraph.org/images/panoramic/
The idea is simple : if the user hover the black rectangle in the borders, the central background move.
source code :
www.yagraph.org/images/panoramic/sources-pano.zip
But I fail to finish it, because when the mouse leave the :hover state, the background is reset to its initial position.
I'm able to put a transition on the initial state to smooth that, but what I wish to achieve is to pause the animation in its computed (or visual) state when the mouse leave, or if you prefer, not to reset it to its initial state.
I'm writing here now, because after a full day of pocking around, I'm not even able to conclude if this is really doable with CSS3 Animations...!
The animation-fill-mode: forwards; do not seems to work, neither triggering the animation-play-state: paused on the initial state.
I suppose this is caused by the fact that I start the animation from another DOM element than the animated one...
Can you help me, or assure me this is a vain attempt ?
Thanks a lot in advance
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我浏览了 CSS3 过渡规范，没有提到停止过渡部分进行。有人谈论对称反转过渡，但当我最近尝试时，它的实现很差。所以恐怕你必须回到 JavaScript。
我认为无论如何，这不是那么风格化，而是更实用，所以在我看来可能更适合 JavaScript。
I've had a look through the CSS3 Transitions Specification, and there's no mention of stopping transitions part way through. There is talk of symmetrically reversing transitions, but when I tried that recently it was poorly implemented. So you're gonna have to go back to JavaScript I'm afraid.
I think this is less stylistic and more functional anyway, so probably better suited to JavaScript IMO.
暂停动画 css3
CSS 示例：
Pausing Animation css3
Example CSS: