[css-animations-2] Add / separator before animation-trigger exit range

[ydaniv]

Animation Triggers allow specifying a default and exit ranges for the specified timeline which currently, in the animation-trigger shorthand, look like 4 (or less) subsequent range definitions.

It was previously suggested to allow separating these 2 ranges using a / to allow specifying the default range with 1 or even 0 values while still be able to unambiguously specify the exit range:

Should we add a / separator between the two ranges to distinguish them more explicitly?
So it would become:

#target {
 animation-trigger: repeat view() contain / cover;
}

And if there's no range on the lefthand side it can be computed to normal.

So, proposing to add a / in the syntax for the animation-trigger shorthand before the animation-trigger-exit-range value(s).

/cc @DavMila @flackr

[bramus]

Seems like a good idea or parsing the shorthand would otherwise be impossible.

[DavMila]

+1 I like the idea

[DavMila]

It's a nice convenience but I would like to suggest we hold off on using / in this way because I think that / would be a natural option for trying to specify multiple triggers per CSS animation in the future.

[ydaniv]

It's a nice convenience but I would like to suggest we hold off on using / in this way because I think that / would be a natural option for trying to specify multiple triggers per CSS animation in the future.

If we did, I don't think that / would be a good choice for separating a list. So far / is used for separating different sub-properties of same type inside the same property value. And in this case we're separating between 2 ranges, which exactly that same case.

[css-meeting-bot]

The CSS Working Group just discussed [css-animations-2] Add / separator before animation-trigger exit range, and agreed to the following:

• RESOLVED: Add / delimiter to syntax for animation-trigger

The full IRC log of that discussion

<kbabbitt> ydaniv: context: talking about animation behaviors
<kbabbitt> ... more specifically scroll triggered animations
<kbabbitt> ... what we have is animation that triggered when an element enters view and it has a view timeline
<kbabbitt> ... and specified range
<kbabbitt> ... set the actual active range, when that range is entered, animation is triggered based on behavior of trigger
<kbabbitt> ... if that behavior is set to repeat, then when the active range is exited, the behavior is to reset the animation
<kbabbitt> ... that can create visual jank
<kbabbitt> ... as we exit range, after user entered default range, then range can be expanded to exit range
<kbabbitt> ... can be specified by developer
<kbabbitt> ... in order to increase range where element needs to exit
<kbabbitt> ... then the author can avoid this visual jank
<kbabbitt> ... this is why you have a default and an exit range
<kbabbitt> ... because these are two values that are the same syntax
<kbabbitt> ... and you have several ways of specifying them
<kbabbitt> ... for example one value, two values, three values, four values
<kbabbitt> ... it can be ambiguous whether you wanted to specify exit range, or use one value for entry and one for exit
<kbabbitt> ... proposal is to add / delimiter
<kbabbitt> Rossen9: any feedback?
<TabAtkins> +1 to the /, I think
<fantasai> +1
<flackr> +1
<kbabbitt> flackr: seems reasonable
<kbabbitt> Proposal: Add / delimiter to syntax for animation-trigger
<kbabbitt> Rossen9: objections?
<kbabbitt> RESOLVED: Add / delimiter to syntax for animation-trigger