[css-animations] Allow percentages in animation-delay, relative to duration

[LeaVerou]

A common use of animation-delay is using negative delays in conjunction with animation-play-stage to step through animations in order to debug them. This would be much easier if percentages could be used out of the box, instead of having to change the duration of the animation to 100s so that one could use "percentages". In addition, even when delays are used in their intended way, they are often relative to the duration, so it could help DRY-up code. No other property in the animation shorthand accepts percentages, so no disambiguation issues either.

It's a pretty minor change so I could make it myself if at least one of the editors approves. @tabatkins? @dbaron? @grorg?

[dbaron]

Seems reasonable to me, although it's probably worth getting slightly broader feedback than just the editors (e.g., at least implementors such as @birtles @shans and somewhat at Microsoft via @gregwhitworth and perhaps a bit of feedback from other developers if you haven't gotten that already).

[dbaron]

Also, transition-delay and animation-delay should probably match.

[gregwhitworth]

@ChumpChief is best to discuss animation based changes - thanks for looping us in @dbaron

[ChumpChief]

Seems reasonable to me.

[birtles]

I'm not sure about the use case: for stepping through an animation the animation API is a more natural fit since it doesn't require clobbering the delay but I imagine there are other use cases for this? In any case this should go in level 2 of the relevant specs.

[LeaVerou]

@birtles The Animation API is JavaScript, which is beyond the capabilities of about half of CSS authors. In addition, even for developers it's way more hassle than just adding two declarations via the browser dev tools and using the up/down arrows to step through.

[birtles]

If interactive debugging is the use case, then developers can just use the browsers' animation debugging tools which provides a GUI to the animations API. (And don't misunderstand me, this isn't just stop energy, I want to add this feature, but I'd like to find use cases to justify the implementation and testing cost first.)

[LeaVerou]

What if the stepping through an animation is done via a control on the page (e.g. a slider) or a variable (e.g. scrolling)? It's not just about debugging.

[leuvi]

@LeaVerou I have a haunting about animation-delay set -100s, the percentages background color disappears, -1s to -99s are correct, where is the problem? demo: https://jsfiddle.net/loveleuvi/bsp8ujfk/

[danburzo]

As an author, I found it surprising that animation-delay does not already take a percentage. It's very intuitive for me that percentages relate to the overall duration of the animation.

In addition to debugging animations, a use case for negative delay on paused animation is unlocking a whole new dimension for interpolating CSS properties. In particular, it enables sophisticated fluid typography by deriving animation-delay from a <length> (e.g. the width of an element).

---

Note that currently the rules of calc() prevent a pure CSS application of the technique, since we can't produce a <time> starting from <length>. I'm not sure if introducing percentage values in animation-delay would bring us closer to a CSS solution (I haven't fully internalized the unit combos calc() affords) — it sounds more like a matter of CSS not having a way to strip units off lengths, so that they work as numbers in arithmetics.

[manuelmeister]

@LeaVerou is there somewhere a proposal for a function to convert a css unit to a unitless number that can be multiplied with a unit?