Re: Proposal for animation-pause property

Piping up: I also have a need for iteration-delays in regular old CSS.
Sequence groups are a lovely part of the Web Animations API--but could we
not also translate this behavior to a CSS property like iteration-delay in
some way?


[image: photo]
*Rachel Nabors*
Web Animation Engineer
w:rachelnabors.com
<http://twitter.com/rachelnabors>  <http://dribbble.com/rachelthegreat>
<http://plus.google.com/u/0/+RachelNabors>
<http://linkedin.com/in/rachelnabors>
------------------------------

Curator of Web Animation Weekly <http://webanimationweekly.com>

*Speaking & Workshops*

   - May 18 –20 Front-Trends Keynote, Warsaw
   <https://2016.front-trends.com/>
   - Jun 01 CSSconf Nordic, Oslo <http://cssconf.no/>
   - Aug 07 CSS Conf Argentina, Buenos Aires <http://cssconfar.com/>
   - Oct 17 –18 CSS Dev Conf, San Antonio
<http://2016.cssdevconf.com/>, Animation
   Workshop <http://2016.cssdevconf.com/#workshops>


On Sun, May 8, 2016 at 6:51 PM Brian Birtles <bbirtles@mozilla.com> wrote:

> 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
> >
>
>
> --
Curator of Web Animation Weekly
Speaking & Workshops
• Apr 05 –06 SmashingConf, San Francisco
• Apr 21 Frontend Masters, online, CSS Animations and Transitions Master
Class
• May 18 –20 Front-Trends Keynote, Warsaw
• Jun 01 CSSconf Nordic, Oslo