[CSS3 Animations] Pause an animation leaving an :hover state

Hi all,

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 to this list 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,
Camille Bissuel
www.yagraph.org