[scroll-animations-1] separate animation-range and animation-delay #7901

Author: fantasai

scroll-animations-1/Overview.bs

@@ -741,67 +741,96 @@ spec: cssom-view-1; type: dfn;
 
 	A set of animation keyframes can be attached
 	in reference to [=named timeline ranges=]
-	by adjusting the duration of the animation.
+	by restricting the animation’s [=active phase=]
+	to the specified timeline range.
+	Delays (see 'animation-delay')
+	are set within this restricted range,
+	constricting it further.
+	If a duration ('animation-duration') is given,
+	it extends from the end of the start delay
+	until the start of the end delay,
+	and further restricts the range-restricted end.
+
+	<pre class="ascii-art">
+	range start┐             ╺┉┉┉┉active phase┉┉┉┉╸           ┌range end
+	┄┄┄┄┄┄┄┄┄┄┄├─────────────╊━━━━━━━━━━━━━━━━━━━━╉───────────┤┄┄┄┄┄┄┄┄
+	           ╶┄start delay┄╴                    ╶┄end delay┄╴
+	                         ╶┄┄┄┄┄ duration┄┄┄┄┄┄╴
+	</pre>
 
 	<pre class="propdef shorthand">
-		Name: animation-delay, animation-range
-		Value: [ <<'animation-delay-start'>> <<'animation-delay-end'>>? | <<timeline-range-name>> ]#
+		Name: animation-range
+		Value: [ <<'animation-range-start'>> <<'animation-range-end'>>? | <<timeline-range-name>> ]#
 	</pre>
 
-	The 'animation-delay' and 'animation-range' properties
-	are both [=shorthand property|shorthands=]
-	that set 'animation-delay-start' and 'animation-delay-end'
+	The 'animation-range' property is a [=shorthand property|shorthand=]
+	that sets 'animation-range-start' and 'animation-range-end'
 	together in a single declaration.
-	If the <<'animation-delay-end'>> value is omitted,
-	it is set to zero.
+	If the <<'animation-range-end'>> value is omitted,
+	it is set to ''normal''.
 	If a <<timeline-range-name>> alone is specified,
-	'animation-delay-start' is set to that name plus ''0%''
-	and 'animation-delay-end' is set to that name plus ''100%''.
+	'animation-range-start' is set to that name plus ''0%''
+	and 'animation-range-end' is set to that name plus ''100%''.
 
 	<pre class="propdef">
-		Name: animation-delay-start
-		Value: [ <<time>> | <<timeline-range-name>> <<percentage>> ]#
-		Initial: 0s
+		Name: animation-range-start
+		Value: [ normal | <<timeline-range-name>> <<percentage>> ]#
+		Initial: normal
 		Applies to: all elements
 		Inherited: no
 		Percentages: relative to the specified [=named timeline range=]
-		Computed value: list, each item either a duration or a timeline range and progress percentage
+		Computed value: list, each item either the keyword ''animation-range-start/normal'' or a timeline range and progress percentage
 		Animatable: no
 	</pre>
 
-	Defines a delay between the start of the animation
-	and when it begins executing
-	(i.e. when keyframes attached to 0% progress are mapped).
+	Shifts the <a spec="web-animations-1">start time</a> of the animation
+	(i.e. where keyframes mapped to 0% progress are attached
+	when the iteration count is 1)
+	to the specified position on the timeline.
 
-	<dl dfn-for="animation-delay-start, animation-delay-end" dfn-type=value>
-		<dt><dfn><<time>></dfn>
+	<dl dfn-for="animation-range-start" dfn-type=value>
+		<dt><dfn>normal</dfn>
 		<dd>
-			Defines the delay as a duration. See [[CSS-ANIMATIONS-1]].
+			The start of the [=active phase=]
+			is determined as normal.
+
 		<dt><dfn><<timeline-range-name>> <<percentage>></dfn>
 		<dd>
-			Calculates the delay as the difference between
-			the start of the animation
-			and the specified point on the [=timeline=].
+			The [=active phase=] starts
+			at the specified point on the [=timeline=],
+			plus any applicable start delay.
 	</dl>
 
 	<pre class="propdef">
-		Name: animation-delay-end
-		Value: [ <<time>> | <<timeline-range-name>> <<percentage>> ]#
-		Initial: 0s
+		Name: animation-range-end
+		Value: [ normal | <<timeline-range-name>> <<percentage>> ]#
+		Initial: normal
 		Applies to: all elements
 		Inherited: no
 		Percentages: relative to the specified [=named timeline range=]
-		Computed value: list, each item either a duration or a timeline range and progress percentage
+		Computed value: list, each item either the keyword ''animation-range-end/normal'' or a timeline range and progress percentage
 		Animatable: no
 	</pre>
 
-	Defines a delay between the end of the animation
-	and when it ends executing
-	(i.e. when keyframes attached to 100% progress are mapped).
-	Values are as for 'animation-delay-start',
-	but calculating backwards from the end,
-	i.e. a ''2s'' delay effectively shortens the animation duration,
-	whereas ''-2s'' lengthens it.
+	Shifts the <a spec="web-animations-1">end time</a> of the animation
+	(i.e. where keyframes mapped to 100% progress are attached
+	when the iteration count is 1)
+	to the specified position on the timeline.
+
+	<dl dfn-for="animation-range-end" dfn-type=value>
+		<dt><dfn>normal</dfn>
+		<dd>
+			The <a spec="web-animations-1">end time</a> of the animation
+			is determined as normal.
+
+		<dt><dfn><<timeline-range-name>> <<percentage>></dfn>
+		<dd>
+			The <a spec="web-animations-1">end time</a> of the animation
+			is at the specified point on the [=timeline=]
+			minus any applicable end delay,
+			or at the end of the animation duration,
+			whichever comes first.
+	</dl>
 
 ## Reporting Timeline Range Progress: the ''getCurrentTime()'' method ## {#named-range-get-time}