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

On Oct 5, 2011, at 12:42 AM, Camille Bissuel wrote:

> 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. 

The way to do this is to use JS events to detect when the mouse leaves the element, to read the computed value of the transform with getComputedStyle, and to set that on the element to set its static transform. Sadly, it's not very pretty.

Something we don't have a way to describe yet is the "keep something moving while the page is is a specific state, pause it when the state changes, be able to resume movement later". I'm not sure that's even possible with SMIL.

Simon