Re: Proposal for animation-pause property

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 <https://lists.w3.org/Archives/Public/www-style/2011May/0581.html>

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>:
> 
> 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 <https://lists.w3.org/Archives/Public/www-style/2011May/0717.html>
> 
> 
> http://codepen.io/estelle/pen/PqRwGj <http://codepen.io/estelle/pen/PqRwGj> is a hack for that property, which I
> explain here: http://www.standardista.com/animation-iteration-delay/ <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