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

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> https://twitter.com/scrwd/status/700925874611343360

[2]:  <http://codepen.io/jon/pen/gPJNax> http://codepen.io/jon/pen/gPJNax

 

Lea Verou ✿  <http://lea.verou.me> http://lea.verou.me ✿ @leaverou

 

I am not sure why you think that 1 is not possible. 

To me that looks possible, with a toggle of some kind to not break existing websites.

 

Could you explain more why you think this is not an option?