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

Re: Proposal for animation-pause property

From: Estelle Weyl <estelle@weyl.org>
Date: Mon, 2 May 2016 09:35:57 -0700
Message-ID: <3e96461eacb5e2cbe19c83b2afbea1e1.squirrel@weyl.org>
To: "Michael Gro√Ÿklaus" <mail@mgrossklaus.de>
Cc: www-style@w3.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 www.mgrossklaus.de
>
> USt-Id.: DE279812974
> Finanzamt Hamburg-Hansa
>
>
>
Received on Monday, 2 May 2016 16:36:26 UTC

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