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

Re: Repeat animation-delay throughout iterations

From: Michiel Bijl <michiel@agosto.nl>
Date: Fri, 10 Jul 2015 13:26:40 +0200
Message-Id: <624BF8E8-B9F6-4723-9547-4C6CC8F28C38@agosto.nl>
Cc: www-style list <www-style@w3.org>
To: Xidorn Quan <quanxunzhen@gmail.com>
True, but we all know what a pain time line management can be. As long as we don't have proper timeline management in the form of example a, we need something to make it better. 

Example a:

@keyframes timeline {
  1s, 3s {
    opacity: 0
  }

  4s {
    opacity: 1
  }
}

—Michiel

> On 10 Jul 2015, at 13:14, Xidorn Quan <quanxunzhen@gmail.com> wrote:
> 
>> On Fri, Jul 10, 2015 at 8:53 PM, 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.
> 
> If you need something to be repeated every iteration, you just need to make it part of the keyframes instead.
> 
> - Xidorn 

Received on Friday, 10 July 2015 11:27:17 UTC

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