Re: Proposal for animation-pause property

On 2016/05/03 4:12, Michael Großklaus wrote:
> Yes, this is exactly what I mean. I work quite a lot with animations and
> have this problem again and again:
> I have a short animation and I want a pause between each iteration
> (animation-iteration-delay would probably be the better wording for it,
> yes). The solution with adding keyframes is ok, but it's really not
> optimal especially when you want to the change the animation-duration or
> the duration of the break between each iteration because you would have
> to adapt the keyframes (which can happen quite often when you're working
> on the animation and still trying to find the right durations etc.).
>
> I completely agree with these
> answers: https://lists.w3.org/Archives/Public/www-style/2011May/0581.html

Looking at this use case in particular, I think sequence groups[1] might 
be a more natural fit.

For the specific case of wanting to add a delay between iterations, 
sequence groups could work too by adding a second empty keyframe effect. 
(It wouldn't be quite the same, however, since the empty animation would 
run again as part of the final iteration so your animationend event 
would be delayed. You'd need nested sequence effects to eliminate that.)

I believe that when we looked at adding iteration delay in Web 
Animations the main challenge was fill modes--do you apply the backwards 
fill or the forwards fill, i.e. do you hold the final value of the 
previous iteration, or the first value of the next? I suspect you want 
to be able to do either which then suggests you need more fill mode 
values so it becomes more complex. (Sequence effects at least let you 
reuse the existing fill modes to get different behaviors.)

Best regards,

Brian

[1] https://w3c.github.io/web-animations/level-2/#sequence-effects

>
> Btw., there is another problem with not having a property like this:
> When you're using animation-timing-function, it's applied to the whole
> animation.
> So, if the whole animation is 10s long because you want an 8s break
> after your 2s animation, the timing-function is kind of useless
> (especially when you use the pre-defined functions and do not write your
> own timing functions).
>
> Unfortunately I don't see in the mailing list archive what happened
> after your discussion about this property. Has it been rejected?
>
>
> Thanks,
> Michael
>
>
>
>> Am 02.05.2016 um 18:35 schrieb Estelle Weyl <estelle@weyl.org
>> <mailto:estelle@weyl.org>>:
>>
>> Is this similar to the animation-iteration-delay conversation we had a 5
>> years ago?
>>
>> https://lists.w3.org/Archives/Public/www-style/2011May/0717.html
>>
>>
>> http://codepen.io/estelle/pen/PqRwGj is a hack for that property, which I
>> explain here: http://www.standardista.com/animation-iteration-delay/.
>> Works in FF, O and Chrome, but not Safari.
>>
>> Which brings up the question: which browser is handling repeated animation
>> names correctly?
>>
>> -Estelle
>>
>> On Sat, April 30, 2016 6:53 am, Michael Großklaus wrote:
>>> Hello,
>>>
>>>
>>> I have a proposal for a new property for css animations. I was discussing
>>> this briefly (almost a year ago though) with Lea Verou via twitter and
>>> she told me that I should post to this mailing list and make my case. So
>>> I hope that's ok and the usual way to go. :)
>>>
>>>
>>> So, I quite often have the case that I'm implementing an animation where
>>> the animation itself e.g. takes two seconds, but I want a break of, let's
>>> say, 8 seconds before the animation starts again.
>>>
>>> At the moment I have to implement it like this:
>>>
>>>
>>> @keyframes animationName {
>>> 0% { animationStart }
>>> 20% { animationEnd }
>>> 21% { animationStart }
>>> }
>>>
>>>
>>> element { animation: animationName 10s;
>>> }
>>>
>>>
>>> This has multiple disadvantages:
>>> - I have to animate back to the initial state (see keyframe 21%) what
>>> causes code duplication (I'm not 100% sure about this point - correct me
>>> if I'm wrong!) - If I want to change either the duration or the
>>> break, but
>>> keep everything else as it is (in absolute numbers), I have to adjust the
>>> keyframes since they're relative to the duration value
>>>
>>> If there would be something like an animation-pause, I could do the
>>> following:
>>>
>>>
>>> @keyframes animationName {
>>> 0% { animationStart }
>>> 100% { animationEnd }
>>> }
>>>
>>>
>>> element { animation: animationName 2s;
>>> animation-pause: 8s;
>>> }
>>>
>>>
>>> This would solve the above mentioned disadvantages in my opinion.
>>>
>>>
>>> I hope I was able to make my point. Thank you in advance!
>>>
>>>
>>>
>>> Best regards,
>>> Michael Großklaus
>>>
>>>
>>>
>>> —
>>>
>>> Freiberuflicher Web-Entwickler
>>>
>>>
>>> Scheideweg 6
>>> 20253 Hamburg
>>>
>>>
>>> mail@mgrossklaus.de <mailto:mail@mgrossklaus.de> www.mgrossklaus.de
>>> <http://www.mgrossklaus.de/>
>>>
>>> USt-Id.: DE279812974
>>> Finanzamt Hamburg-Hansa
>

Received on Monday, 9 May 2016 01:47:16 UTC