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 the 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-axis/index.md

@@ -0,0 +1,142 @@
+---
+title: scroll-timeline-axis
+slug: Web/CSS/scroll-timeline-axis
+page-type: css-property
+browser-compat: css.properties.scroll-timeline-axis
+---
+
+{{CSSRef}}
+
+The **`scroll-timeline-axis`** [CSS](/en-US/docs/Web/CSS) property can be used to specify which scrollbar provides the timeline for a scroll-timeline animation.
+
+A scroll-timeline animation is one in which the animation progress is determined by a scrollbar position rather than time, or some other dimension.
+The [`scroll-timeline-name`](/en-US/docs/Web/CSS/scroll-timeline-axis) property defines a name that can be used to identify an element as the source of a scroll-timeline; the `scroll-timeline-axis` is used to indicate whether the horizontal or vertical scrollbar in that element provides the timeline.
+Note that if the element does not display a scrollbar in the axis dimension, then no timeline will be created.
+
+The `scroll-timeline-axis` (and `scroll-timeline-name`) can also be set using the [`scroll-timeline`](/en-US/docs/Web/CSS/scroll-timeline-name) shorthand property.
+
+## Syntax
+
+```css
+scroll-timeline-axis: block;
+scroll-timeline-axis: inline;
+scroll-timeline-axis: vertical;
+scroll-timeline-axis: horizontal;
+```
+
+### Values
+
+Allowed values for the scrollbar axis 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 in 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`, and then this name is applied to the animation on the `#square` element using `animation-timeline: squareTimeline`.
+
+In order to demonstrate the effect of `scroll-timeline-axis` the horizontal (non-default) scrollbar is used to control the rotation of the square.
+
+### 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 then set `scroll-timeline-axis: horizontal;` so that the _horizontal scrollbar_ position will determine the animation timeline.
+
+The height and width of the container are set to 200px and we also set the container to create scrollbars it it overflows (below we will use CSS on the "stretcher" element to ensure that it does overflow).
+
+```css
+#container {
+  height: 200px;
+  width: 200px;
+  overflow: scroll;
+  scroll-timeline-name: squareTimeline;
+  scroll-timeline-axis: horizontal;
+}
+```
+
+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.
+The position is set as absolute so the element rotates in-place.
+
+```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: 50px; 
+}
+
+@keyframes rotateAnimation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+```
+
+The "stretcher" CSS simply sets the block height and width large enough to force the 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: 300px;
+  width: 1200px
+}
+```
+
+### Result
+
+Scroll the bottom/horizontal bar to see the animation.
+
+{{EmbedLiveSample("Setting a scroll timeline", "100%", "200px")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [`scroll-timeline-name`](/en-US/docs/Web/CSS/scroll-timeline-axis)
+- [`scroll-timeline`](/en-US/docs/Web/CSS/scroll-timeline)
+- [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline)