Re: [css-animations] Force integer number of actual iterations

On 2016/02/20 18:35, Lea Verou wrote:
> This is something that comes up *a lot* with animations. I was reminded
> again today by this guy on twitter [1] (to save you the time, this is
> his eventual reduction [2]), but it's a really common thing. I've
> stumbled on various permutations of this problem multiple times myself
> as well.
>
> In a nutshell: Author wants to have a continuous repeating animation
> (e.g. a rotation, a pulse, anything) until something happens, when the
> rule doesn’t apply any more so the animation stops. However, it's
> jarring if it just stops in the middle and snaps back to its original
> position. The alternative of keeping it paused and unpausing to animate
> will prevent the snapping, but it will not necessarily produce the
> desired end state.
>
> There are two mental models to go about with it (from the author's pov):
> 1. They want a transition at the end of their animation, over the same
> properties, from the current state of the animation to the new state
> (which usually coincides with the start state).

One way you could do this is pause the original animation then trigger a 
new animation from +0 to the desired final state, where "+0" is an 
additive zero value. Additive animations are something in Web Animations 
we're hoping to expose in CSS Animations 2.[1]

Brian.

[1] https://drafts.csswg.org/css-animations-2/#animation-composition

Received on Sunday, 21 February 2016 23:13:51 UTC