As part of #7044 we resolved:

• Add ability to specify start and end delays in terms of position in a named phase position (keyword + percentage), e.g. animation-delay: contain 0%; animation-duration: contain 100% attaches the animation between the 0% and 100% points in the contain phase. (See also https://github.com/w3c/csswg-drafts/issues/4342].)
• Add shorthand that expands a phase name to 0% start delay and 100% end delay. E.g. animation-phase: contain expands to animation-delay: contain 0%; animation-end-delay: contain 100%.

These resolutions specify how in CSS you can target an animation to a particular phase of the view timeline. However, we also need a way to do the same from the web animations API. In particular the options passed for the timing of web animations are EffectTiming and OptionalEffectTiming.

Here are a few options I can think of:

1. The simplest would be to extend the delay and endDelay options to also accept a string specification equivalent to the CSS counterpart (e.g. delay: "enter 20%").
2. Extend delay and endDelay to also accept an object type representing the combination of phase and time, e.g. delay: {phase: "enter", offset: CSS.percentage(20)}.
3. Add new options, e.g. startTime / endTime or phase for specifying the "phase", "time" pairs. We would then have to decide what to do when delay and endDelay are also specified.