Pause animation leaving state: hover

Question

I'm currently experimenting with CSS3 animations and trying to create a panoramic view with CSS only (no javascript at all).

Until now, I get a kind of working demo: http://www.yagraph.org/images/panoramic/

The idea is simple: if the user hangs a black rectangle in the borders, the central background moves.

source code: www.yagraph.org/images/panoramic/sources-pano.zip

But I can not finish it, because when the mouse leaves the state: hover, the background reset is in its original position. I can put the transition in the initial state to smooth it out, but I want to pause the animation in its calculated (or visual) state when the mouse leaves or if you prefer not to reset it to its original state.

I am writing here now because after a whole day of break I can’t even conclude if this is really possible with CSS3 animations ...!

Animation-fill mode: forward; It does not seem to work without starting the animation mode: suspended in the initial state. I suppose this is because I am running the animation from a different DOM element than the animated ...

Can you help me or assure me that this is a futile attempt?

Thank you very much in advance

Answer 1

I looked at the CSS3 Transitions Specification , and there is no mention of partial transition stopping. They talk about symmetrically transitioning transitions, but when I tried this recently, it was poorly implemented. So you have to go back to JavaScript, I'm afraid.

I think this is less stylistic and functional, so it is probably better suited for JavaScript IMO.

Answer 2

Pause css3 animation

CSS example:

button:hover .icon{ -webkit-animation-play-state:paused; /* Webkit Browsers */ -moz-animation-play-state:paused; /* Firefox*/ animation-play-state:paused; }