[scroll-animations] Move animation-timeline to css-animations-2 (#5159)

Author: majido

css-animations-2/Overview.bs

@@ -64,9 +64,12 @@ urlPrefix: https://drafts.csswg.org/web-animations-1/; type: dfn; spec: web-anim
     text: target element
     text: target effect
     text: target effect end
+    text: timeline
     text: unresolved
+    text: default document timeline
 urlPrefix: https://drafts.csswg.org/css-writing-modes-4/; type: dfn; spec: css-writing-modes-4
     text: equivalent physical property; url: logical-to-physical
+urlPrefix: https://drafts.csswg.org/css-values-4/; spec:css-values-4; type:dfn; text:css identifier
 </pre>
 
 <h2 id="delta">Delta specification</h2>
@@ -516,6 +519,76 @@ keyframe specifying each property.
   Issue: Create pictures of these examples and verify they make sense.
 </div>
 
+
+## The 'animation-timeline' property ## {#animation-timeline}
+
+The 'animation-timeline' property defines the <a>timeline</a> used with the
+animation.
+
+Note: This specification does not introduce any syntax to specify animation
+timelines but instead it is up to others specifications such as Scroll-linked
+Animations [[SCROLL-ANIMATIONS]] to do so.
+
+<pre class='propdef'>
+Name: animation-timeline
+Value: <<single-animation-timeline>>#
+Initial: auto
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed value: list, each item either a case-sensitive [=css identifier=] or 
+    the keywords ''single-animation-timeline/none'',
+    ''single-animation-timeline/auto''.
+Canonical order: per grammar
+Animatable: no
+</pre>
+
+<pre>
+<dfn>&lt;single-animation-timeline></dfn> = auto | none | <<timeline-name>>
+</pre>
+
+The 'animation-timeline' property is similar to properties like 'animation-name'
+and 'animation-duration' in that it can have one or more values, each one
+imparting additional behavior to a corresponding [=animation=] on the element,
+with the timelines matched up with animations as described
+[[css-animations-1#animation-name|here]].
+
+Each value has type <<single-animation-timeline>>, whose possible values have
+the following effects:
+
+:   <dfn for="single-animation-timeline" dfn-type=value>auto</dfn>
+::  The animation's [=timeline=] is a {{DocumentTimeline}}, more specifically
+    the <a>default document timeline</a>.
+
+:   <dfn for="single-animation-timeline" dfn-type=value>none</dfn>
+::  The animation is not associated with a [=timeline=].
+
+:   <dfn>&lt;timeline-name></dfn>
+::  Find the last timeline at-rule in document order with its name matching
+    <<timeline-name>>. If such a timeline at-rule exists, then the animation's
+    [=timeline=] is a timeline as defined by that rule. Otherwise the animation
+    is not associated with a [=timeline=].
+    <pre>
+      &lt;timeline-name> = <<custom-ident>> | <<string>>
+    </pre>
+
+
+Issue: Make it easier to use 'animation-name' to select the timeline when
+'animation-timeline' is not specified. Allowing 'animation-name' to be used for
+selecting timeline enables most common animations to have to use a single name
+for both their keyframes and timeline which is simple and ergonomics. The
+'animation-timeline' property gives authors additional control to independently
+select keyframes and timeline if necessary.
+
+
+## The 'animation' shorthand property ## {#animation-shorthand}
+
+The 'animation' shorthand property syntax is as follows:
+
+<dfn>&lt;single-animation></dfn> = <<time>> || <<easing-function>> || <<time>> || <<single-animation-iteration-count>> || <<single-animation-direction>> || <<single-animation-fill-mode>> || <<single-animation-play-state>> || [ none | <<keyframes-name>> ] || <<single-animation-timeline>>
+
+
+
 # Animation Events # {#events}
 
 ## Event dispatch ## {#event-dispatch}

scroll-animations-1/Overview.bs

@@ -683,94 +683,6 @@ offset=] and its [=effective end offset=] to be non-null. This means that for
 example if one uses an element-based offset whose {{target}} is not a descendant
 of the scroll timeline {{source}}, the timeline remains inactive.
 
-## The 'animation-timeline' property ## {#animation-timeline}
-
-A {{ScrollTimeline}} may be applied to a CSS Animation [[CSS3-ANIMATIONS]] using
-either the 'animation-timeline' property or 'animation-name' property. With the
-former taking precedent over the latter.
-
-<pre class='propdef'>
-Name: animation-timeline
-Value: <<single-animation-timeline>>#
-Initial: auto
-Applies to: all elements, ::before and ::after pseudo-elements
-Inherited: no
-Animatable: no
-Percentages: N/A
-Media: interactive
-Computed value: As specified
-Canonical order: per grammar
-</pre>
-
-<pre>
-<dfn>&lt;single-animation-timeline></dfn> = auto | none |  <<timeline-name>>
-</pre>
-
-The 'animation-timeline' property is similar to properties like
-'animation-name' and 'animation-duration' in that it can have one or
-more values, each one imparting additional behavior to a corresponding
-[=animation=] on the element, with the timelines matched up with animations as
-described [[css-animations-1#animation-name|here]].
-
-Each value has type <<single-animation-timeline>>, whose possible values have
-the following effects:
-
-:   auto
-::  The animation's [=timeline=] is a {{DocumentTimeline}}, more specifically
-    the <a>default document timeline</a>.
-
-:   none
-::  The animation is not associated with a [=timeline=].
-
-
-:   <<timeline-name>>
-::  If ''@scroll-timeline'' rule with  the name specified by <<timeline-name>>, then
-    the animation's [=timeline=] is a timeline whose property values are
-    provided by that rule. Otherwise there is no [=timeline=] associated with
-    the animation.
-
-
-If 'animation-timeline' property is not specified but 'animation-name' is
-specified then its value is used to select the scroll-timeline at-rule that
-provides the property values for the animation's timeline.
-
-Note: Allowing animation-name to be used for selecting timeline enables most
-common animations to have to use a single name for both their keyframes and
-timeline which is simple and ergonomics. The 'animation-timeline' property gives
-additional control to authors to independently select keyframes and timeline if
-necessary.
-
-
-In this case, each possible value of type <<keyframes-name>> from
-'animation-name' has the following effects:
-
-:   none
-::  No timelines and keyframes are specified at all, so there will be no
-    animation. Any other animations properties specified for this animation have no
-    effect.
-
-
-:   <<keyframes-name>>
-::  If ''@scroll-timeline'' rule with  the name specified by <<keyframes-name>>, then
-    the animation's [=timeline=] is a timeline whose property values are
-    provided by that rule. Otherwise the animation's [=timeline=] is a
-    {{DocumentTimeline}}, more specifically the <a>default document
-    timeline</a>.
-
-Note: Notice that the behavior for the case where no timeline with the given
-name is found is different for these two properties. This ensures backward
-compatibility because all existing time-based animations with 'animation-name'
-specified expect to use <a>default document timeline</a>.
-
-### Changes to the 'animation' shorthand property ### {#animation-shorthand}
-
-The 'animation' shorthand property syntax is updated to accept an additional
-optional <<timeline-name>>.
-
-	<dfn>&lt;single-animation></dfn> = <<time>> || <<easing-function>> || <<time>> || <<single-animation-iteration-count>> || <<single-animation-direction>> || <<single-animation-fill-mode>> || <<single-animation-play-state>> || [ none | <<keyframes-name>> ] || [ none | <<timeline-name>> ]
-
-Issue: Update css-animations spec instead of monkey-patching it here.
-
 ## The '@scroll-timeline' at-rule ## {#scroll-timeline-at-rule}
 
 [=Scroll Timelines=] are specified in CSS using the <dfn>@scroll-timeline</dfn>
@@ -779,18 +691,17 @@ at-rule, defined as follows:
 <pre>
   @scroll-timeline = @scroll-timeline <<timeline-name>> { <<declaration-list>> }
 
-
-  <dfn>&lt;timeline-name></dfn> = <<custom-ident>> | <<string>>
 </pre>
 
-
 An ''@scroll-timeline'' rule has a name given by the <<custom-ident>> or <<string>> in
 its prelude. The two syntaxes are equivalent in functionality; the name is the
 value of the ident or string. As normal for <<custom-ident>>s and <<string>>s,
 the names are fully case-sensitive; two names are equal only if they are
 codepoint-by-codepoint equal. The <<custom-ident>> additionally excludes the
 none keyword.
 
+Once specified, a scroll timeline may be associated with a CSS Animation 
+[[CSS3-ANIMATIONS]] by using the 'animation-timeline' property.
 
 The <<declaration-list>> inside of ''@scroll-timeline'' rule can only contain the
 descriptors defined in this section.

web-animations-1/Overview.bs

@@ -615,7 +615,7 @@ a timing node is not in a state to produce a <a>time value</a>.
 Timelines {#timelines}
 ----------------------------------------
 
-A <dfn>timeline</dfn> provides a source of <a>time values</a> for the
+A <dfn export>timeline</dfn> provides a source of <a>time values</a> for the
 purpose of synchronization.
 
 At any given moment, a [=timeline=] has a single current [=time value=] known
@@ -755,8 +755,8 @@ time=]. If |timeline| is inactive, return an [=unresolved=] [=time value=].
 
 ### The default document timeline ### {#the-documents-default-timeline}
 
-Each {{Document}} has a <a>document timeline</a> called the <dfn>default
-document timeline</dfn>.
+Each {{Document}} has a <a>document timeline</a> called the 
+<dfn export>default document timeline</dfn>.
 The <a>default document timeline</a> is unique to each document and persists for
 the lifetime of the document including calls to <a>document.open()</a> [[!HTML]].