W3C home > Mailing lists > Public > www-style@w3.org > November 2011

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

From: Simon Fraser <smfr@me.com>
Date: Tue, 01 Nov 2011 15:07:37 -0700
Cc: www-style@w3.org
Message-id: <3461FD32-8735-4843-B9BB-33193983909A@me.com>
To: Camille Bissuel <cbissuel@yagraph.org>

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
Received on Tuesday, 1 November 2011 23:10:44 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:46 GMT