Add CSS scroll-timeline* properties

files/en-us/mozilla/firefox/experimental_features/index.md

@@ -432,9 +432,10 @@ The {{cssxref("fit-content_function", "fit-content()")}} function as it applies
 
 ### Scroll-linked animations
 
-The {{cssxref('@scroll-timeline')}} at-rule and {{cssxref('animation-timeline')}} property allow you to define animations that are linked to container scroll progress (rather than time).
-Once specified, a scroll timeline is associated with a [CSS Animation](/en-US/docs/Web/CSS/CSS_Animations) by using the `animation-timeline` property.
-For more information, see {{bug(1676791)}} and {{bug(1676782)}}.
+A scroll-linked animation is one in which the animation depends on the scroll position of a scrollbar instead of time, or some other dimension.
+The {{cssxref('scroll-timeline-name')}} and {{cssxref('scroll-timeline-axis')}} properties (and {{cssxref('scroll-timeline')}} shorthand property) allow you to specify that a particular scrollbar in a particular container can be used as the source for a scroll-linked animation.
+The scroll timeline can then be associated with a particular [CSS Animation](/en-US/docs/Web/CSS/CSS_Animations) by setting the `animation-timeline` property to the `scroll-timeline-name`.
+For more information, see {{bug(1676791)}} and {{bug(1754897)}}.
 
 <table>
   <thead>

files/en-us/web/css/@scroll-timeline/index.md

@@ -12,7 +12,10 @@ tags:
 browser-compat: css.at-rules.scroll-timeline
 ---
 
-{{CSSRef}}{{Non-standard_header}}{{Deprecated_header}}
+{{CSSRef}}{{Deprecated_header}}
+
+> **Warning:** This non-standard feature was added/removed from a draft specification.
+> It has been replaced by [scroll-timeline](/en-US/docs/Web/CSS/scroll-timeline)
 
 The **`@scroll-timeline`** CSS [at-rule](/en-US/docs/Web/CSS/At-rule) defines an [`AnimationTimeline`](/en-US/docs/Web/API/AnimationTimeline) whose time values are determined by scrolling progress within a scroll container and not by minutes or seconds. Once specified, a scroll timeline is associated with a [CSS Animation](/en-US/docs/Web/CSS/CSS_Animations) by using the `animation-timeline` property.
 
@@ -169,11 +172,13 @@ We create an `@scroll-timeline` called `squareTimeline`, setting the `source` as
 
 ## Specifications
 
-This feature was in a draft specification and has been removed from it. It is no longer on track to become a standard.
+This feature was in a draft specification and has been removed from it.
+It is no longer on track to become a standard.
 
 ## Browser compatibility
 
-No released browser ever implemented this feature.
+This was originally implemented on Chrome, and Firefox (behind a preference).
+It has been removed from Firefox 107, and will soon also be removed from Chrome.
 
 ## See also
 

files/en-us/web/css/animation-timeline/index.md

@@ -14,18 +14,20 @@ browser-compat: css.properties.animation-timeline
 
 {{CSSRef}}{{SeeCompatTable}}
 
-The **`animation-timeline`** [CSS](/en-US/docs/Web/CSS) property specifies the names of one or more {{cssxref("@scroll-timeline")}} at-rules describing the scroll animations to apply to the element.
+The **`animation-timeline`** [CSS](/en-US/docs/Web/CSS) property specifies the name of the timeline that defines the progress of the animation.
+
+For an animation that depends on the position of a scroll bar this name will be defined in a {{cssxref("scroll-timeline-name")}} or {{cssxref("scroll-timeline")}} property applied to the element that contains the scrollbar.
 
 <!-- {{EmbedInteractiveExample("pages/css/animation-name.html")}} -->
 
-It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.
+The animation timeline can also be set using the {{cssxref("animation")}} shorthand property.
 
 ## Syntax
 
 ```css
 /* Single animation */
 animation-timeline: none;
-animation-timeline: test_05;
+animation-timeline: some_scrollbar_timeline_name;
 animation-timeline: -specific;
 animation-timeline: sliding-vertically;
 
@@ -48,7 +50,9 @@ animation-timeline: unset;
 - `none`
   - : The animation is not associated with a timeline.
 - `<timeline-name>`
-  - : A {{cssxref('custom-ident')}} or string identifying the scroll timeline, declared with the {{cssxref('@scroll-timeline')}} rule. If two or more scroll timelines share the same name, the last declared within the cascade will be used. If no matching scroll timeline is found, the animation is not associated with a timeline.
+  - : A {{cssxref('custom-ident')}} or string identifying the scroll timeline, declared with the {{cssxref('scroll-timeline-name')}} property (or {{cssxref('scroll-timeline')}} shorthand property).
+    If two or more scroll timelines share the same name, the last declared within the cascade will be used.
+    If no matching scroll timeline is found, the animation is not associated with a timeline.
 
 ## Formal definition
 
@@ -58,27 +62,42 @@ animation-timeline: unset;
 
 {{csssyntax}}
 
-## Examples
+## Exampless
 
 ### Setting a scroll timeline
 
-A scroll timeline named `squareTimeline` is declared and applied to the `#square` element using `animation-timeline: squareTimeline`.
+A scroll timeline named `squareTimeline` is defined using the `scroll-timeline-name` property on the element with id `container`.
+This is then applied to the animation on the `#square` element using `animation-timeline: squareTimeline`.
 
 #### HTML
 
+The HTML for the example is shown below.
+
 ```html
 <div id="container">
   <div id="square"></div>
+  <div id="stretcher"></div>
 </div>
 ```
 
 #### CSS
 
+The CSS for the container sets it as the source of a scroll timeline named `squareTimeline` using the `scroll-timeline-name` property (we could also set which scrollbar axis to use with `scroll-timeline-axis`, but there will be only one scrollbar here, and it will be used by default).
+
+The height of the container is set to 300px and we also set the container to create a vertical scrollbar it it overflows (below we will use CSS on the "stretcher" element to ensure that it does overflow).
+
 ```css
 #container {
   height: 300px;
+  overflow-y: scroll;
+  scroll-timeline-name: squareTimeline;
+  position: relative;
 }
+```
+
+The CSS below defines a square that rotates in alternate directions according to the timeline provided by the `animation-timeline` property, which is set to the `squareTimeline` timeline named above.
 
+```css
 #square {
   background-color: deeppink;
   width: 100px;
@@ -88,12 +107,9 @@ A scroll timeline named `squareTimeline` is declared and applied to the `#square
   animation-duration: 3s;
   animation-direction: alternate;
   animation-timeline: squareTimeline;
-}
 
-@scroll-timeline squareTimeline {
-  source: selector("#container");
-  orientation: "vertical";
-  scroll-offsets: 0px, 300px;
+  position: absolute;
+  bottom: 0;
 }
 
 @keyframes rotateAnimation {
@@ -106,11 +122,20 @@ A scroll timeline named `squareTimeline` is declared and applied to the `#square
 }
 ```
 
+The "stretcher" CSS simply sets the block height to 600px, which forces container element to overflow and create scroll bars.
+Without this element there would be no scrollbar, and hence no scroll timeline to associate with the animation timeline.
+
+```css
+#stretcher {
+  height: 600px;
+}
+```
+
 #### Result
 
 Scroll to see the animation.
 
-{{EmbedLiveSample("Setting a scroll timeline")}}
+{{EmbedLiveSample("Setting a scroll timeline", "100%", "320px")}}
 
 ## Specifications
 

files/en-us/web/css/css_animations/index.md

@@ -13,7 +13,8 @@ browser-compat: css.properties.animation
 
 {{CSSRef}}
 
-**CSS Animations** is a module of CSS that lets you animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes.
+**CSS Animations** is a module of CSS that lets you animate the values of CSS properties over time, using keyframes.
+The behavior of these keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes.
 
 ## Reference
 
@@ -30,11 +31,12 @@ browser-compat: css.properties.animation
 - {{cssxref("animation-play-state")}}
 - {{cssxref("animation-timeline")}}
 - {{cssxref("animation-timing-function")}}
+- {{cssxref('scroll-timeline-name')}}
+- {{cssxref('scroll-timeline-axis')}}
 
 ### At-rules
 
 - {{cssxref("@keyframes")}}
-- {{cssxref("@scroll-timeline")}}
 
 ## Guides
 

files/en-us/web/css/scroll-timeline/index.md

@@ -0,0 +1,166 @@
+---
+title: scroll-timeline
+slug: Web/CSS/scroll-timeline
+page-type: css-shorthand-property
+browser-compat: css.properties.scroll-timeline
+---
+
+{{CSSRef}}
+
+The **`scroll-timeline`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) can be used to name a particular container and specify which of its scrollbar axes should provide the scroll timeline for an animation.
+It is equivalent to setting both [`scroll-timeline-name`](/en-US/docs/Web/CSS/scroll-timeline-name) and [`scroll-timeline-axis`](/en-US/docs/Web/CSS/scroll-timeline-axis) in a single declaration.
+
+The name can then be referenced in an [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline) declaration to indicate that the specified scroll bar should be used as the source timeline for animating the current element.
+
+## Constituent properties
+
+This property is a shorthand for the following CSS properties:
+
+- [`scroll-timeline-name`](/en-US/docs/Web/CSS/scroll-timeline-name)
+- [`scroll-timeline-axis`](/en-US/docs/Web/CSS/scroll-timeline-axis)
+
+## Syntax
+
+```css
+/* scroll-timeline-name and scroll-timeline-axis */
+scroll-timeline: custom_name_for_timeline block;
+scroll-timeline: custom_name_for_timeline inline;
+scroll-timeline: custom_name_for_timeline vertical;
+scroll-timeline: custom_name_for_timeline horizontal;
+
+/* none and scroll-timeline-axis */
+scroll-timeline: none block;
+scroll-timeline: none inline;
+scroll-timeline: none vertical;
+scroll-timeline: none horizontal;
+
+/* scroll-timeline-name or scroll-timeline-axis */
+scroll-timeline: none;
+scroll-timeline: custom_name_for_timeline;
+scroll-timeline: block;
+scroll-timeline: inline;
+scroll-timeline: vertical;
+scroll-timeline: horizontal;
+```
+
+### Values
+
+A `<scroll-timeline-name>` value followed by a `<scroll-timeline-axis>` value may be applied to the container element in any order.
+At least one value must be applied.
+
+Allowed values for `<scroll-timeline-name>` are:
+
+- `none`
+  - : The timeline has no name.
+- `<custom-ident>`
+  - : An arbitrary custom identifier that can be used to reference the scroll timeline in an [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline).
+    Possible values are described in [`<custom-ident>`](/en-US/docs/Web/CSS/custom-ident).
+
+The `<scroll-timeline-axis>` indicates which scrollbar axis, in the container identified by `<scroll-timeline-name>`, provides the scroll timeline.
+Allowed values are:
+
+- `block`
+  - : (Default) Scrollbar in the block axis of the scroll container.
+    The block axis is the direction perpendicular to the flow of text within a line.
+    For horizontal writing modes like standard English this is the same as `vertical`, while for vertical writing modes it is the same as `horizontal`.
+- `inline`
+  - : Scrollbar the inline axis of the scroll container.
+    The inline axis is the direction parallel to the flow of text in a line.
+    For horizontal writing modes this is the same as `horizontal`, while for vertical writing modes this is the same as `vertical`.
+- `vertical`
+  - : Scrollbar in the vertical axis of the scroll container.
+- `horizontal`
+  - : Scrollbar in the horizontal axis of the scroll container.
+
+## Formal definition
+
+{{cssinfo}}
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Examples
+
+A scroll timeline named `squareTimeline` is defined using the `scroll-timeline-name` property on the element with id `container`.
+This is then applied to the animation on the `#square` element using `animation-timeline: squareTimeline`.
+
+### HTML
+
+The HTML for the example is shown below.
+
+```html
+<div id="container">
+  <div id="square"></div>
+  <div id="stretcher"></div>
+</div>
+```
+
+### CSS
+
+The CSS for the container sets it as the source of a scroll timeline named `squareTimeline` using the `scroll-timeline-name` property (we could also set which scrollbar axis to use with `scroll-timeline-axis`, but there will be only one scrollbar here, and it will be used by default).
+
+The height of the container is set to 300px and we also set the container to create a vertical scrollbar it it overflows (below we will use CSS on the "stretcher" element to ensure that it does overflow).
+
+```css
+#container {
+  height: 300px;
+  overflow-y: scroll;
+  scroll-timeline-name: squareTimeline;
+  position: relative;
+}
+```
+
+The CSS below defines a square that rotates in alternate directions according to the timeline provided by the `animation-timeline` property, which is set to the `squareTimeline` timeline named above.
+
+```css
+#square {
+  background-color: deeppink;
+  width: 100px;
+  height: 100px;
+  margin-top: 100px;
+  animation-name: rotateAnimation;
+  animation-duration: 3s;
+  animation-direction: alternate;
+  animation-timeline: squareTimeline;
+
+  position: absolute;
+  bottom: 0;
+}
+
+@keyframes rotateAnimation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+```
+
+The "stretcher" CSS simply sets the block height to 600px, which forces container element to overflow and create scroll bars.
+Without this element there would be no scrollbar, and hence no scroll timeline to associate with the animation timeline.
+
+```css
+#stretcher {
+  height: 600px;
+}
+```
+
+### Result
+
+Scroll to see the animation.
+
+{{EmbedLiveSample("Setting a scroll timeline", "100%", "320px")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline)

files/en-us/web/css/shorthand_properties/index.md

@@ -218,6 +218,7 @@ See [Cascade and inheritance](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_
   - {{cssxref("place-self")}}
   - {{cssxref("scroll-margin")}}
   - {{cssxref("scroll-padding")}}
+  - {{cssxref("scroll-timeline")}}
   - {{cssxref("text-decoration")}}
   - {{cssxref("text-emphasis")}}
   - {{cssxref("transition")}}