[scroll-animations-1] Term for concept of timeline phases

[flackr]

In #7044 we resolved to add the concept of named timeline phases:

• Add the concept of named timeline phases. Certain types of timelines (such as ViewTimelines) will provide such phases. (In the future, other types of timelines may offer named phases, or we might add the ability to have custom named phases.)

However, there are concerns with using the term phases for this, @birtles pointed out that effect phases would still exist (even if the prior timeline phases concept went away) and have a fairly different meaning. For the css shorthand property we could avoid using the term, however we would still need a name for this concept in the spec and likely need to use this concept name for the interface used for #7589.

So far the only alternative term to phase that has been proposed is cue, so our current options are:

• phase (stick with the current proposed terminology)
  You could think of these as the same as effect phases (ranges of time) and they could even exist alongside before and after phases, though it does feel as if it should be a single active phase at any time which may not continue to be true.

• cue
  Define this new term, representing a range of the timeline time.

In addition to choosing a term we should also decide what to call the shorthand:

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%.

This could be any of the options I proposed on the original issue or we could omit the shorthand entirely. However on further thought I feel like this should be some variation on animation-delay as it could be used to express start and end delay, and currently the end delay is not settable via CSS. My strawman proposal would be to expand the existing animation-delay property to accept one (current version, just specify start delay) or two values (start and end delay), where either of those delays can include phases as proposed.

animation-delay: <start delay> <end delay>?

Where either delay is <time> | <phase> | <phase> <percent>. Omitting the <percent> would resolve to 0 or 100% depending on whether this is the start or end delay.

[ydaniv]

Just to clarify, when given just a single start value it will expand to start 0% start 100%? And a given value of start end would expand to start 0% end 100%?
And mixing values of phases with time-based animations and vice versa, mixing time with scroll-linked animations, would be ignored?

[kevers-google]

How about "range" instead of "phase" or "cue"?

[fantasai]

Cues aren't time ranges, they're points in time. So I think I'd like to veto that idea.

[flackr]

So just to update the proposal, we can call the concept timeline ranges.

In CSS, we can make animation-delay a shorthand for specifying start and end delay, and/or a named range, i.e.

animation-delay:
    <timeline-range-name> |
    <animation-delay-start> |
    <animation-delay-start> <animation-delay-end>

Where:

• When only <animation-delay-start> is specified, <animation-delay-end> computes to 0 for backwards compatibility.
• <animation-delay-start> and <animation-delay-end> are <time> | <timeline-range-name> <percentage>
• When just specifying <timeline-range-name> it will expand to <timeline-range-name> 0% <timeline-range-name> 100% to automatically fill the specified range.

Given this, I don't know if we need an animation-range property.

[fantasai]

@flackr Current draft is using the term “named timeline range”, fwiw. Maybe review https://drafts.csswg.org/scroll-animations-1/#timeline-ranges again and let me know what you think?

[flackr]

Looks good to me!