- From: Michiel Bijl <michiel@agosto.nl>
- Date: Fri, 10 Jul 2015 13:26:40 +0200
- To: Xidorn Quan <quanxunzhen@gmail.com>
- Cc: www-style list <www-style@w3.org>
- Message-Id: <624BF8E8-B9F6-4723-9547-4C6CC8F28C38@agosto.nl>
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