[scroll-animations-1][css-animations-2] Add animation-range to animation shorthand #8054
Description
scroll-animations-1 upgrades animation-delay to both be a shorthand for animation-delay-start and animation-delay-end as well as to support a new syntax for each of animation-delay-start and animation-delay-end of <timeline-range-name> <percentage> and just a <timeline-range-name> by itself for the overall property. Note that issue #7901 is bikeshedding some of the particulars but the high level is that more values will be part of animation-delay.
Since animation-delay is also part of the animation short-hand we also have to make sure that these new values can be uniquely parsed and differentiated from other properties in that shorthand. Issue #6946 touches on the general difficulty of extending the animation shorthand.
If we assume the format of <animation-delay> within the animation property is the same, we will have a compat risk with any named ranges which could overlap with animation keyframe names (i.e. currently cover, contain, enter, exit but potentially user defined range names in the future), as well as limit the ability to add any other numerical properties which could be confused with the offsets (currently percentages but #7575 will likely add lengths as well).
After discussing this with @andruud, we think functional notation would make animation delays unambiguous w.r.t animation-names or other future values which may also want to specify lengths, times, percentages. Specifically, we could add two functions (open to bikeshedding names):
offset(<timeline-range-name> <percentage>)would map to an animation-delay, the first occurrence being start delay and the second being end delay. (Alternate name ideas: delay to be consistent with underlying property)range(<timeline-range-name>)would map toanimation-delay: <timeline-range-name> 0% <timeline-range-name> 100%.
The scroll-animations spec also builds on the ability to specify an animation-timeline which has additionally been added to the animation shorthand in css-animations-2. The spec doesn't currently explain how to disambiguate a named timeline from an animation-name, but we could either use the positions like we do to currently differentiate duration and start delay or we could add a function for this as well, e.g. timeline(<timeline-name>) to unambiguously specify a timeline. We could keep the existing support for referring to anonymous timelines since those already have a functional notation. Open to other ideas here. @tabatkins