W3C home > Mailing lists > Public > www-style@w3.org > May 2016

Re: Proposal for animation-pause property

From: Michael Gro▀klaus <mail@mgrossklaus.de>
Date: Mon, 9 May 2016 08:54:16 +0200
Cc: www-style@w3.org
Message-Id: <3D17923E-C661-45C1-AA43-56D75AB022B7@mgrossklaus.de>
To: Brian Birtles <bbirtles@mozilla.com>, Rachel Nabors <rachelnabors@gmail.com>, Estelle Weyl <estelle@weyl.org>

> 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.)

Maybe I'm missing something, but why not just use the existing animation-fill-mode? Of course, you could implement a new fill-mode property and there might be a use case for it (which I don't see at the moment)... but in my opinion it would not be mandatory because you could just use the current animation-fill-mode (which would be much more useful imho anyway).

I agree that sequence modes could work for this, although it would be some kind of a workaround to me then.


Thanks,
Michael



>> 
>> 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 <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 <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> <mailto:mail@mgrossklaus.de <mailto:mail@mgrossklaus.de>> www.mgrossklaus.de <http://www.mgrossklaus.de/>
>>>> <http://www.mgrossklaus.de/ <http://www.mgrossklaus.de/>>
>>>> 
>>>> USt-Id.: DE279812974
>>>> Finanzamt Hamburg-Hansa


Received on Monday, 9 May 2016 07:18:00 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:59 UTC