Question

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 :
http://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 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…!

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

Answer 1

I’ve had a look through the CSS3 Transitions Specification, and there’s no mention of stopping transitions part way through. There is talk of symmetrically reversing transitions, but when I tried that recently it was poorly implemented. So you’re gonna have to go back to JavaScript I’m afraid.

I think this is less stylistic and more functional anyway, so probably better suited to JavaScript IMO.