[csswg-drafts] [scroll-animations-1][css-animations-2] animation short-hand support for new properties (#8054)

flackr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [scroll-animations-1][css-animations-2] animation short-hand support for new properties ==
[scroll-animations-1](https://drafts.csswg.org/scroll-animations-1/) [upgrades animation-delay](https://drafts.csswg.org/scroll-animations-1/#named-range-animation-declaration) 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](https://www.w3.org/TR/css-animations-1/#animation) 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 to `animation-delay: <timeline-range-name> 0% <timeline-range-name> 100%`.

The scroll-animations spec also builds on the ability to specify an [animation-timeline](https://drafts.csswg.org/css-animations-2/#propdef-animation-timeline) which has additionally been added to the [animation shorthand in css-animations-2](https://drafts.csswg.org/css-animations-2/#animation-shorthand). 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 


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8054 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 9 November 2022 21:35:04 UTC