[scroll-animations-1] Allow optional `<percentage>` in `animation-range-*`

[cdoublev]

If I understand correctly, the <percentage> in animation-range-start and animation-range-end refers to a specified point on the timeline. Currently, when declaring animation-range with a single <timeline-range-name>:

If a <timeline-range-name> alone is specified, animation-range-start is set to that name plus 0% and animation-range-end is set to that name plus 100%.

So I wonder why animation-range-start and animation-range-end do not allow <percentage> to be optional:

  Name:	animation-range-start 
- Value:	[ normal | <timeline-range-name> <percentage> ]#
+ Value:	[ normal | <timeline-range-name> <percentage>? ]#

It would default to 0% in animation-range-start and 100% in animation-range-end.

Also, I guess this <percentage> should be restricted to [0,100], so <percentage [0,100]>, as well as in <keyframe-selector>.

I also wonder if:

• <percentage> should always be lower in animation-range-start than in animation-range-end
• normal should not be allowed to repeat
• it would be more intuitive to expand animation-range: timeline-1 5% to animation-range-start: timeline-1 5%; animation-range-end: timeline-1 100% (instead of animation-range-start: timeline-1 5%; animation-range-end: normal
• <timeline-range-name> is inappropriate in <keyframe-selector> because I think animation-range defines an interval for all keyframes and an author is not supposed to declare eg. timeline-a 0% {} timeline-b 100% {} with animation-range: timeline-x

But these questions might deserve their own issue and I realize that these properties are currently under discussion so they may be a bit premature.

[flackr]

It would default to 0% in animation-range-start and 100% in animation-range-end.

This seems fine to me.

Also, I guess this <percentage> should be restricted to [0,100], so <percentage [0,100]>, as well as in <keyframe-selector>.

Discussed in #8552 already. I don't think there's any need to restrict things and allowing percentages < 0 or > 100% allows for specifying more cases, e.g. exit -10% starts 10% before the exit range starts.

I also wonder if:

• <percentage> should always be lower in animation-range-start than in animation-range-end

This can't be enforced if they're in different ranges and in many cases whether one is before the other or not will be dynamic, e.g. contain 0% is usually after entry-crossing 99% but not if the element is larger than the viewport.

TLDR I don't think we should try to enforce ordering and just let the math work out as it does. If you specify a 0 range then you'll have an animation that is always inactive.

• normal should not be allowed to repeat

Why not? We don't disallow things like overflow: hidden hidden;

• it would be more intuitive to expand animation-range: timeline-1 5% to animation-range-start: timeline-1 5%; animation-range-end: timeline-1 100% (instead of animation-range-start: timeline-1 5%; animation-range-end: normal

I've actually wondered whether it would be more intuitive for a single value range name / offset to be treated as an inset on the range. E.g. Expand animation-range: range-name 5% to animation-range-start: range-name 5%; animation-range-end: range-name calc(100% - 5%). Typically single value shorthands expand to the same value applied to all longhands but that would result in 0 range which is probably never what you want unless you're using it as a trigger point.

• <timeline-range-name> is inappropriate in <keyframe-selector> because I think animation-range defines an interval for all keyframes and an author is not supposed to declare eg. timeline-a 0% {} timeline-b 100% {} with animation-range: timeline-x

The range name is not naming a timeline, it's a named range within a timeline. This is setting the start and end points of the animation. It is valid for particular keyframes to be further refined to other phases. For example you could specify

@keyframes frames {
  contain 0% { transform: translateY(-10px); } /* contain 0% is equivalent to 0% given the animation-range. */
  exit 0% { transform: none; opacity: 1; }
  exit 100% { opacity: 0; } /* technically exit 100% is equivalent to 100% given the animation-range. */
}

.animate {
  animation: frames;
  animation-timeline: view();
  animation-range: contain 0% cover 100%;
}

But these questions might deserve their own issue and I realize that these properties are currently under discussion so they may be a bit premature.

Yes, these probably should be separate.

[fantasai]

I've actually wondered whether it would be more intuitive for a single value range name / offset to be treated as an inset on the range.

@flackr This is a super interesting idea. Should we spec it? :)

[fantasai]

Summary of proposed changes:

• Make <percentage> optional in animation-range-start/end, defaulting to 0%/100%.
• If animation-range: name x% is specified, expand it to animation-range-start: name x%; animation-range-end: name (100 - x)%. (Current spec expands to animation-range-start: name x%; animation-range-end: normal.)

[ydaniv]

If we consider having defaults of 0%/100% I think it would be more useful to expand range-name 5% to range-name 5% range-name 100%.
I think this sort of symmetry is very interesting specifically for cover or even contain, but less so for the others.

[cdoublev]

Thanks for the clarifications, some points were confused in my mind. I have re-read the entire spec but have no preference on which of the default values I would prefer (100% vs. calc(100% - <animation-range- start>)).

[css-meeting-bot]

The CSS Working Group just discussed [scroll-animations-1] Allow optional `<percentage>` in `animation-range-*` , and agreed to the following:

• RESOLVED: Make <percentage> optional in animation-range-start/end, defaulting to 0%/100%
• RESOLVED: When specifying "animation-range: foo X%", set the -range-end to "foo 100%" (staying in same phase, just setting to end)

The full IRC log of that discussion

<fantasai> -> https://github.com//issues/8438#issuecomment-1464672747
<TabAtkins> fantasai: there was discussion about %s in teh syntax of animation-range
<TabAtkins> fantasai: Can specify the shorthand to a name, but the longhands currently require a %
<TabAtkins> fantasai: One proposal is to make that optional - if omitted it defaults to 0%/100% depending on prop
<TabAtkins> flackr: sounds fine to me
<bramus> +1
<TabAtkins> TabAtkins: +1
<TabAtkins> astearns: proposed resolution is to make % optional in animation-range-start/end, defaulting to 0%/100%
<fantasai> PROPOSAL: Make <percentage> optional in animation-range-start/end, defaulting to 0%/100%
<TabAtkins> RESOLVED: Make <percentage> optional in animation-range-start/end, defaulting to 0%/100%
<fantasai> animation-range: name x%
<TabAtkins> fantasai: if yous pecify `animation-range: name %`, currently it sets animation-range-start to that, and leaves -end as normal
<fantasai> animation-range-start: name x%; animation-range-end: normal
<fantasai> animation-range-start: name x%; animation-range-end: name (100 - x)%
<TabAtkins> fantasai: The alternative is to expand it to this ^^
<TabAtkins> fantasai: so if you say "contain 5%", it'll set them to "contain 5%" and "contain 95%", so you're insetting from either end
<TabAtkins> flackr: I put this forward bc it felt odd to take the specified % from the start, but ending in a potentially totally different animation range
<ydaniv> q+
<TabAtkins> flackr: felt consistent with margin/padding that get spammed to the other side of the block.
<astearns> ack ydaniv
<TabAtkins> ydaniv: q is do we want to change the range as well - if start is "entry" do we use "exit" in the end?
<TabAtkins> fantasai: Seems maybe too magical? Don't you want contain/cover?
<TabAtkins> YehonatanDaniv: For those the proposal makes sense. Seems funky that for entry 5% we expand to entry 95%
<TabAtkins> flackr: You can already use 'contain' to do that, but there are use-cases for keeping it in the same range. So i'd prefer not to.
<TabAtkins> fantasai: I'd understand if you wanted to expand "name X%" to "name X%" and "name 100%"
<TabAtkins> fantasai: so we'd take the name and set it to both longhands, but only use the % in start
<flackr> animation-range-start: name x%; animation-range-end: name 100%
<fantasai> animation-range: name x%
<fantasai> 1) animation-range-start: name x%; animation-range-end: normal
<fantasai> 2) animation-range-start: name x%; animation-range-end: name (100 - x)%
<fantasai> 3) animation-range-start: name x%; animation-range-end: name 100%
<TabAtkins> (this was gonna be my suggestion too - if the concern is just that setting 'end' to an unrelated phase, it seems reasonable to just set to that phase with 100%)
<TabAtkins> flackr: good with 2 or 3
<TabAtkins> fantasai: Slight pref for 3, okay with 2
<TabAtkins> TabAtkins: prefer 3
<TabAtkins> emilio: Also prefer 3
<TabAtkins> emilio: 2 seems too magic
<fantasai> TabAtkins: particularly, I don't know what 2 would do if you start at 55% :)
<TabAtkins> astearns: Do we think we'll get a second % in animation-range at some point?
<TabAtkins> fantasai: You can specify "name % name %" to end wherever you want
<TabAtkins> fantasai: In theory we could say "name % %" default to the previous name
<ydaniv> staying with 3 (:
<TabAtkins> astearns: If we already have the syntax, no need to complicate until people ask for it
<TabAtkins> astearns: So seems like we have option 3 consensus
<TabAtkins> RESOLVED: When specifying "animation-range: foo X%", set the -range-end to "foo 100%" (staying in same phase, just setting to end)
<fantasai> ACTION: file issue on 3-value syntax