[scroll-animations-1] Replace @timeline with @scroll-timeline (#5008)

Author: majido

scroll-animations-1/EXPLAINER.md

@@ -144,7 +144,7 @@ A ScrollTimeline is specified by a number of parameters:
 
 #### CSS syntax
 
-We are introducing a new `@timeline` rule similar to the existing `@keyframes` rule. This will allow
+We are introducing a new `@scroll-timeline` rule similar to the existing `@keyframes` rule. This will allow
 scroll-linked animation to be specified in CSS.
 
 Here is an example to demonstrate this which fades the target as `#scroller` scroll from zero to
@@ -160,9 +160,8 @@ max.
   to { opacity: 0 }
 }
 
-@timeline fade {
-    timeline-type: scroll;
-    scroll-source: selector(#scroller);
+@scroll-timeline fade {
+  source: selector(#scroller);
 }
 ```
 
@@ -189,20 +188,18 @@ div.circle {
   animation-timeline: union-timeline;
 }
 
-@timeline collision-timeline {
-  timeline-type: scroll;
-  scroll-source: selector(#container);
-  scroll-direction: block;
-  scroll-start:  200px;
-  scroll-end: 300px;
+@scroll-timeline collision-timeline {
+  source: selector(#container);
+  direction: block;
+  start:  200px;
+  end: 300px;
 }
 
-@timeline union-timeline {
-  timeline-type: scroll;
-  scroll-source: selector(#container);
-  scroll-direction: block;
-  scroll-start:  250px;
-  scroll-end: 300px;
+@scroll-timeline union-timeline {
+  source: selector(#container);
+  direction: block;
+  start:  250px;
+  end: 300px;
 }
 
 @keyframes left-circle {
@@ -483,7 +480,7 @@ should consider [logical transforms](https://github.com/w3c/fxtf-drafts/issues/3
 ## Considered alternatives
 
 ### CSS Syntax
-We have considered alternatives function based css syntax but decided to go with a @timeline rule
+We have considered alternatives function based css syntax but decided to go with a @scroll-timeline rule
 instead. See additional CSSWG discussion [here](https://github.com/w3c/csswg-drafts/issues/4338).
 
 

scroll-animations-1/Overview.bs

@@ -142,20 +142,18 @@ Using the CSS markup:
     animation-timeline: union-timeline;
   }
 
-  @timeline collision-timeline {
-    timeline-type: scroll;
-    scroll-source: selector(#container);
-    scroll-direction: block;
-    scroll-start:  200px;
-    scroll-end: 300px;
+  @scroll-timeline collision-timeline {
+    source: selector(#container);
+    orientation: block;
+    start:  200px;
+    end: 300px;
   }
 
-  @timeline union-timeline {
-    timeline-type: scroll;
-    scroll-source: selector(#container);
-    scroll-direction: block;
-    scroll-start:  250px;
-    scroll-end: 300px;
+  @scroll-timeline union-timeline {
+    source: selector(#container);
+    orientation: block;
+    start:  250px;
+    end: 300px;
   }
 
   @keyframes left-circle {
@@ -223,9 +221,8 @@ this example could be written as follows:
 
 <pre class='lang-css'>
 @media (prefers-reduced-motion: no-preference) {
-  @timeline progress-timeline {
-    timeline-type: scroll;
-    scroll-source: selector(#body);
+  @scroll-timeline progress-timeline {
+    source: selector(#body);
   }
 
   @keyframes progress {
@@ -539,15 +536,15 @@ the following effects:
 
 
 :   <<timeline-name>>
-::  If ''@timeline'' rule with  the name specified by <<timeline-name>>, then
+::  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 timeline at-rule that provides
-the property values for the animation's timeline.
+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
@@ -566,7 +563,7 @@ In this case, each possible value of type <<keyframes-name>> from
 
 
 :   <<keyframes-name>>
-::  If ''@timeline'' rule with  the name specified by <<keyframes-name>>, then
+::  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
@@ -586,106 +583,83 @@ optional <<timeline-name>>.
 
 Issue: Update css-animations spec instead of monkey-patching it here.
 
-## The '@timeline' at-rule ## {#timeline-at-rule}
+## The '@scroll-timeline' at-rule ## {#scroll-timeline-at-rule}
 
-[=Scroll Timelines=] are specified in CSS using the <dfn>@timeline</dfn>
+[=Scroll Timelines=] are specified in CSS using the <dfn>@scroll-timeline</dfn>
 at-rule, defined as follows:
 
 <pre>
-  @timeline = @timeline <<timeline-name>> { <<declaration-list>> }
+  @scroll-timeline = @scroll-timeline <<timeline-name>> { <<declaration-list>> }
 
 
   <dfn>&lt;timeline-name></dfn> = <<custom-ident>> | <<string>>
 </pre>
 
 
-An ''@timeline'' rule has a name given by the <<custom-ident>> or <<string>> in
+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.
 
 
-The <<declaration-list>> inside of ''@timeline'' rule can only contain the
+The <<declaration-list>> inside of ''@scroll-timeline'' rule can only contain the
 descriptors defined in this section.
 
-### the 'timeline-type' descriptor ### {#timeline-type-descriptors}
-
-
-<pre class='descdef'>
-  Name: timeline-type
-  For: @timeline
-  Value: scroll | time
-  Initial: time
-</pre>
-
-The 'timeline-type' determines the type of timeline and whose possible values
-have the following effects:
-
-:   time
-::  The animation's [=timeline=] is a {{DocumentTimeline}}, more specifically
-    the <a>default document timeline</a>.
-
-:   scroll
-::  The animation's [=timeline=] is a {{ScrollTimeline}} as specified in the
-    ''@timeline'' rule's <<declaration-list>>.
-
-
-
 ### Scroll Timeline descriptors ### {#scroll-timeline-descriptors}
 
 
 <pre class='descdef'>
-  Name: scroll-source
-  For: @timeline
+  Name: source
+  For: @scroll-timeline
   Value: selector(<<id-selector>>) | none
   Initial: none
 </pre>
 
-'scroll-source' descriptor determines the scroll timeline's {{source}}. If
-specified as an '<selector()>' the scroll timeline's {{source}} is the
-[=scroll container=] identified by the <<id-selector>>, otherwise if not
-specified or none then it is the the {{scrollingElement}} of the {{Document}} 
-<a lt="document associated with a window">associated</a> with the {{Window}}
-that is the <a>current global object</a>.
+'source' descriptor determines the scroll timeline's {{source}}. If specified as
+an '<selector()>' the scroll timeline's {{source}} is the [=scroll container=]
+identified by the <<id-selector>>, otherwise if not specified or none then it is
+the the {{scrollingElement}} of the {{Document}} <a lt="document associated with
+a window">associated</a> with the {{Window}} that is the <a>current global
+object</a>.
 
 Issue(4338): consider choosing animation target's nearest scrollable ancestor
 instead of document's scrolling Element
 
 <pre class='descdef'>
-  Name: scroll-orientation
-  For: @timeline
+  Name: orientation
+  For: @scroll-timeline
   Value: auto | block | inline | horizontal | vertical
   Initial: auto
 </pre>
 
-'scroll-orientation' descriptor determines the scroll timeline's {{orientation}}.
+'orientation' descriptor determines the scroll timeline's {{orientation}}.
 
 
 <pre class='descdef'>
-  Name: scroll-start
-  For: @timeline
+  Name: start
+  For: @scroll-timeline
   Value: auto | <<length>> | <<percentage>>
   Initial: auto
 </pre>
 
-'scroll-start' descriptor determines the scroll timeline's {{start}}.
+'start' descriptor determines the scroll timeline's {{start}}.
 
 
 <pre class='descdef'>
-  Name: scroll-end
-  For: @timeline
+  Name: end
+  For: @scroll-timeline
   Value: auto | <<length>> | <<percentage>>
   Initial: auto
 </pre>
 
-'scroll-end' descriptor determines the scroll timeline's {{end}}.
+'end' descriptor determines the scroll timeline's {{end}}.
 
 
 <pre class='descdef'>
   Name: scroll-time-range
-  For: @timeline
+  For: @scroll-timeline
   Value: auto | <<time>>
   Initial: auto
 </pre>
@@ -736,11 +710,10 @@ instead of document's scrolling Element
   <pre class="lang-css">
     @media (prefers-reduced-motion: no-preference) {
 
-      @timeline progress {
-        timeline-type: scroll;
+      @scroll-timeline progress {
         /* Assume the HTML element has id 'root' */
-        scroll-source: selector(#root);
-        scroll-orientation: vertical;
+        source: selector(#root);
+        orientation: vertical;
       }
 
       @keyframes progress {
@@ -758,7 +731,8 @@ instead of document's scrolling Element
         width: 0;
         height: 2px;
         background-color: red;
-        /* The same name is used to select keyframes and timeline at-rules */
+        /* This name is used to select both the keyframes and the
+           scroll-timeline at-rules. */
         animation-name: progress;
         animation-duration: 1s;
         animation-fill-mode: forwards;