title: Pause an animation leaving an :hover state
body: <p>I'm currently experimenting with CSS3 Animations, and try to achieve a Panoramic view with CSS only (no javascript at all).</p>
  
  <p>So far I obtain a sort-of-working demo :
  <a href="http://www.yagraph.org/images/panoramic/" rel="nofollow">http://www.yagraph.org/images/panoramic/</a></p>
  
  <p>The idea is simple : if the user hover the black rectangle in the borders, the central background move.</p>
  
  <p>source code :
  <a href="http://www.yagraph.org/images/panoramic/sources-pano.zip" rel="nofollow">www.yagraph.org/images/panoramic/sources-pano.zip</a></p>
  
  <p>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.</p>
  
  <p>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...!</p>
  
  <p>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...</p>
  
  <p>Can you help me, or assure me this is a vain attempt ?</p>
  
  <p>Thanks a lot in advance</p>