Pause auto play on hover v2 - electric boogaloo

[xzyfer]

This is revised implementation of #4 with 4536% more sexy.

Feature

Pause gallery autoplay whilst an item is being hovered over as one would expect from a tradition javascript based solution.

How?

CSS3 animation module to the rescue, more specifically animation-play-state: paused;.

The ‘animation-play-state’ property defines whether the animation is running or paused. A running animation can be paused by setting this property to ‘paused’. To continue running a paused animation this property can be set to ‘running’. A paused animation will continue to display the current value of the animation in a static state, as if the time of the animation is constant. When a paused animation is resumed, it restarts from the current value, not necessarily from the beginning of the animation.

But wait

There's a cavet though! As I alluded to in my original implementation

[animation-play-state] doesn't pause animations that are big delayed. This causes animations to start queuing once their delay is over.

The current implementation defines a single animation that is applied to all gallery items with successive delays (hawt!). As noted above this doesn't play nice if you happen to hover the gallery before every animation has begun to play atleast once.

To work around this initially I programmatically generated a new animation for each item. This works as expected but was messy.

The solution

To avoid the excessive increase in complexity, and generated file size of my original approach I wanted to find a way to get delays and play-state to play nice.

If the value for ‘animation-delay’ is a negative time offset then the animation will execute the moment it is applied, but will appear to have begun execution at the specified offset.

Viola! By reversing the animating I could instead use negative delays. This means all the animations have technically begun immediately so play-state can now be utilised.