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

Lea Verou skrev:
> 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).
> 2. They want an indefinite number of iterations, but they should be
> forced to be integer when the animation eventually is unapplied.
>
> Given that animations operate on computed style, I guess 1 is
> infeasible, even though it would provide a more flexible solution.
> Would 2 be possible somehow? I imagine the tricky part would be how to
> define that an animation can continue when there is no applied
> property about it on the element. 
> If that's not actually tricky, I imagine the syntax could be a new
> keyword for animation-iteration-count, TBB (some ideas: integer,
> whole, round, finish). E.g. animation-iteration-count: infinite whole;
> If that is indeed tricky, we could introduce a new animation property
> (animation-finish?), which would be applied by the author on the
> element's new state (.is-loaded in [2]) and it basically tells the UA
> "finish off whatever animation you were running that does not apply
> any more". Perhaps that would be feasible at least?
>
> [1]: https://twitter.com/scrwd/status/700925874611343360
> [2]: http://codepen.io/jon/pen/gPJNax
>
> Lea Verou ✿ http://lea.verou.me ✿ @leaverou
>
>
>
>
>
>
>
You are missing several solutions.

One obvious solution is to have multiple transition points. However, in
the end this doesn't really solve the underlying problem. It just makes
the wait until the transition shorter. Still worth pursuing, but it's
not an actual solution.

Another solution is blending. Blend from one animation to another. For
anyone who don't know what animation blending is, it is to interpolate
between the results of several animations. It's quite popular when it
comes to character animation.

Now, I realize that these solutions don't always apply. These are most
suited for complex animations. Not the simple examples you give. But
animations aren't always simple.

Received on Saturday, 20 February 2016 11:31:43 UTC