W3C home > Mailing lists > Public > www-style@w3.org > July 2015

Re: Repeat animation-delay throughout iterations

From: Estelle Weyl <estelle@weyl.org>
Date: Sun, 12 Jul 2015 17:16:00 -0700
Cc: www-style@w3.org
Message-Id: <4873BC5F-A08B-422B-A30F-55A0C9E72766@weyl.org>
To: Michiel Bijl <michiel@agosto.nl>
There was a discussion back in June 2011 about adding “animation-iteration-delay”. That didn’t go very far, but that seems to be what you are asking for. 

If you have infinite iterations, include the delay within the keyframe. If you have only a few iterations, right now you can hack the effect of animation-iteration-delay:

div {
  animation-name: unicorns, unicorns, unicorns;
  animation-delay: 3s, 11s, 19s;

  animation-timing-function:  linear;
  animation-fill-mode: forwards;
  animation-duration: 5s;

in this case, the first goes from 3 to 8s, then from 11 to 16s, then from 19 to 24s, with last animation done at 24.

This works in FF and Chrome. Did not test elsewhere. Wrote about it here: http://www.standardista.com/animation-iteration-delay/ <http://www.standardista.com/animation-iteration-delay/> Someone commented we’re SOL in Edge and Safari.

Estelle Weyl

On Jul 10, 2015, at 3:53 AM, Michiel Bijl <michiel@agosto.nl> wrote:

Something I run into quite a lot as I build animations, is that animation-delay doesn't persist throughout iterations.

Take the following code:

div {
  animation: unicorns linear infinite forwards 5s 3s;

On the first iteration it would wait 3 seconds before it starts, then it plays for 5 seconds. On consecutive plays it will loop the 5 second part but skip the delay. This is certainly useful in certain cases, but there are also cases where you want the delay to persist; kind of like `animation-fill-mode: forwards;`.

I propose a second argument for the `animation-delay` property: repeat.

div {
  animation-delay: 3s repeat;

This will ensure that the delay is repeated on consecutive iterations. Alternatives to the repeat keyword are welcome, simply chose it because it is already in CSS vocabulary.

Bugzilla report: https://www.w3.org/Bugs/Public/show_bug.cgi?id=28936 <https://www.w3.org/Bugs/Public/show_bug.cgi?id=28936>


Received on Monday, 13 July 2015 00:16:33 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:52:18 UTC