Scroll-driven Animations

Editor’s Draft,

More details about this document
This version:
https://drafts.csswg.org/scroll-animations-1/
Latest published version:
https://www.w3.org/TR/scroll-animations-1/
Feedback:
CSSWG Issues Repository
Inline In Spec
Editors:
(Invited Expert)
(Mozilla)
(Apple)
(Microsoft)
Elika J. Etemad / fantasai (Apple)
Robert Flack (Google)
Former Editors:
(Google)
Mantaroh Yoshinaga
(Google)
Suggest an Edit for this Spec:
GitHub Editor

Abstract

Defines CSS properties and an API for creating animations that are tied to the scroll offset of a scroll container.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.

Status of this document

This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.

Please send feedback by filing issues in GitHub (preferred), including the spec code “scroll-animations” in the title, like this: “[scroll-animations] …summary of comment…”. All issues and comments are archived. Alternately, feedback can be sent to the (archived) public mailing list [email protected].

This document is governed by the 03 November 2023 W3C Process Document.

1. Introduction

This specification defines mechanisms for driving the progress of an animation based on the scroll progress of a scroll container. These scroll-driven animations use a timeline based on scroll position, rather than one based on clock time. This module provides both an imperative API building on the Web Animations API as well as a declarative API building on CSS Animations. [WEB-ANIMATIONS-1]

There are two types of scroll-driven timelines:

Note: Scroll-driven animations, whose progress is linked to the scroll position, are distinct from scroll-triggered animations, which are triggered by a scroll position, but whose progress is driven by time.

1.1. Relationship to other specifications

Web Animations [WEB-ANIMATIONS-1] defines an abstract conceptual model for animations on the Web platform, with elements of the model including animations and their timelines, and associated programming interfaces. This specification extends the Web Animations model by defining scroll-driven timelines and allowing them to drive progress in animations to create scroll-driven animations.

This specification introduces both programming interfaces for interacting with these concepts, as well as CSS properties that apply these concepts to CSS Animations [CSS-ANIMATIONS-1]. To the extent the behavior of these CSS properties is described in terms of the programming interfaces, User Agents that do not support scripting may still conform to this specification by implementing the CSS features to behave as if the underlying programming interfaces were in place.

Like most operations in CSS besides selector matching, features in this specification operate over the flattened element tree.

1.2. Relationship to asynchronous scrolling

Some user agents support scrolling that is asynchronous with respect to layout or script. This specification is intended to be compatible with such an architecture.

Specifically, this specification allows expressing scroll-driven effects in a way that does not require script to run each time the effect is sampled. User agents that support asynchronous scrolling are allowed (but not required) to sample such effects asynchronously as well.

1.3. Value Definitions

This specification follows the CSS property definition conventions from [CSS2] using the value definition syntax from [CSS-VALUES-3]. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types.

In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the CSS-wide keywords as their property value. For readability they have not been repeated explicitly.

2. Scroll Progress Timelines

Scroll progress timelines are timelines linked to progress in the scroll position of a scroll container along a particular axis. The startmost scroll position represents 0% progress and the endmost scroll position represents 100% progress.

Scroll progress timelines can be referenced in animation-timeline anonymously using the scroll() functional notation or by name (see § 4.2 Named Timeline Scoping and Lookup) after declaring them using the scroll-timeline properties. In the Web Animations API, they can be represented anonymously by a ScrollTimeline object.

2.1. Calculating Progress for a Scroll Progress Timeline

Progress (the current time) for a scroll progress timeline is calculated as: scroll offset ÷ (scrollable overflow sizescroll container size)

If the 0% position and 100% position coincide (i.e. the denominator in the current time formula is zero), the timeline is inactive.

In paged media, scroll progress timelines that would otherwise reference the document viewport are also inactive.

2.2. Anonymous Scroll Progress Timelines

2.2.1. The scroll() notation

The scroll() functional notation can be used as a <single-animation-timeline> value in animation-timeline and specifies a scroll progress timeline. Its syntax is

<scroll()> = scroll( [ <scroller> || <axis> ]? )
<axis> = block | inline | x | y
<scroller> = root | nearest | self

By default, scroll() references the block axis of the nearest ancestor scroll container. Its arguments modify this lookup as follows:

block
Specifies to use the measure of progress along the block axis of the scroll container. (Default.)
inline
Specifies to use the measure of progress along the inline axis of the scroll container.
x
Specifies to use the measure of progress along the horizontal axis of the scroll container.
y
Specifies to use the measure of progress along the vertical axis of the scroll container.
nearest
Specifies to use the nearest ancestor scroll container. (Default.)
root
Specifies to use the document viewport as the scroll container.
self
Specifies to use the element’s own principal box as the scroll container. If the principal box is not a scroll container, then the scroll progress timeline is inactive.

Note: Progress is in reference to the scroll origin, which can flip depending on writing mode, even when x or y is specified.

References to the root element propagate to the document viewport (which functions as its scroll container).

Each use of scroll() corresponds to its own instance of ScrollTimeline in the Web Animations API, even if multiple elements use scroll() to refer to the same scroll container with the same arguments.

2.2.2. The ScrollTimeline Interface

enum ScrollAxis {
  "block",
  "inline",
  "x",
  "y"
};

dictionary ScrollTimelineOptions {
  Element? source;
  ScrollAxis axis = "block";
};

[Exposed=Window]
interface ScrollTimeline : AnimationTimeline {
  constructor(optional ScrollTimelineOptions options = {});
  readonly attribute Element? source;
  readonly attribute ScrollAxis axis;
};

A ScrollTimeline is an AnimationTimeline that represents a scroll progress timeline. It can be passed to the Animation constructor or the animate() method to link the animation to a scroll progress timeline.

source, of type Element, readonly, nullable

The scroll container element whose scroll position drives the progress of the timeline.

axis, of type ScrollAxis, readonly

The axis of scrolling that drives the progress of the timeline. See value definitions for <axis>, above.

Inherited attributes:

currentTime (inherited from AnimationTimeline)

Represents the scroll progress of the scroll container as a percentage CSSUnitValue, with 0% representing its startmost scroll position (in the writing mode of the scroll container). Null when the timeline is inactive.

While 0% will usually represent the scroll container’s initial scroll position, it might not depending on its content distribution. See CSS Box Alignment 3 § 5.3 Overflow and Scroll Positions. Is this what we want?

Add a note about whether currentTime can be negative or > 100%.

ScrollTimeline(options)

Creates a new ScrollTimeline object using the following procedure:

  1. Let timeline be the new ScrollTimeline object.

  2. Set the source of timeline to:

    If the source member of options is present and not null,

    The source member of options.

    Otherwise,

    The scrollingElement of the Document associated with the Window that is the current global object.

  3. Set the axis property of timeline to the corresponding value from options.

If the source of a ScrollTimeline is an element whose principal box does not exist or is not a scroll container, or if there is no scrollable overflow, then the ScrollTimeline is inactive.

A ScrollTimeline’s duration is 100%.

The values of source and currentTime are both computed when either is requested or updated.

2.3. Named Scroll Progress Timelines

Scroll progress timelines can also be defined on the scroll container itself, and then referenced by name by elements within the name’s scope (see § 4.2 Named Timeline Scoping and Lookup).

Such named scroll progress timelines are declared in the coordinated value list constructed from the longhands of the scroll-timeline shorthand property, which form a coordinating list property group with scroll-timeline-name as the coordinating list base property. See CSS Values 4 § A Coordinating List-Valued Properties.

2.3.1. Naming a Scroll Progress Timeline: the scroll-timeline-name property

Name: scroll-timeline-name
Value: [ none | <dashed-ident> ]#
Initial: none
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: the keyword none or a list of CSS identifiers
Canonical order: per grammar
Animation type: not animatable

Specifies names for the named scroll progress timelines associated with this element.

2.3.2. Axis of a Scroll Progress Timeline: the scroll-timeline-axis property

Name: scroll-timeline-axis
Value: [ block | inline | x | y ]#
Initial: block
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: a list of the keywords specified
Canonical order: per grammar
Animation type: not animatable

Specifies the axis of any named scroll progress timelines sourced from this scroll container. If this box is not a scroll container, then the corresponding named scroll progress timeline is inactive.

Values are as defined for scroll().

2.3.3. Scroll Timeline Shorthand: the scroll-timeline shorthand

Name: scroll-timeline
Value: [ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentages: see individual properties
Computed value: see individual properties
Animation type: not animatable
Canonical order: per grammar

This property is a shorthand for setting scroll-timeline-name and scroll-timeline-axis in a single declaration.

3. View Progress Timelines

Often animations are desired to start and end during the portion of the scroll progress timeline that a particular box (the view progress subject) is in view within the scrollport. View progress timelines are segments of a scroll progress timeline that are scoped to the scroll positions in which any part of the subject element’s principal box intersects its nearest ancestor scrollport (or more precisely, the relevant view progress visibility range of that scrollport). The startmost such scroll position represents 0% progress, and the endmost such scroll position represents 100% progress; see § 3.2 Calculating Progress for a View Progress Timeline.

Note: The 0% and 100% scroll positions are not always reachable, e.g. if the box is positioned at the start edge of the scrollable overflow rectangle, it might not be possible to scroll to < 32% progress.

View progress timelines can be referenced anonymously using the view() functional notation or by name (see § 4.2 Named Timeline Scoping and Lookup) after declaring them using the view-timeline properties on the view progress subject. In the Web Animations API, they can be represented anonymously by a ViewTimeline object.

3.1. View Progress Timeline Ranges

View progress timelines define the following named timeline ranges:

cover
Represents the full range of the view progress timeline:
contain
Represents the range during which the principal box is either fully contained by, or fully covers, its view progress visibility range within the scrollport.
entry
Represents the range during which the principal box is entering the view progress visibility range.
  • 0% is equivalent to 0% of the cover range.

  • 100% is equivalent to 0% of the contain range.

exit
Represents the range during which the principal box is exiting the view progress visibility range.
  • 0% is equivalent to 100% of the contain range.

  • 100% is equivalent to 100% of the cover range.

entry-crossing
Represents the range during which the principal box crosses the end border edge
exit-crossing
Represents the range during which the principal box crosses the start border edge

Insert diagrams.

In all cases, the writing mode used to resolve the start and end sides is the writing mode of the relevant scroll container. Transforms are ignored, but relative and absolute positioning are accounted for.

Note: For sticky-positioned boxes the 0% and 100% progress conditions can sometimes be satisfied by a range of scroll positions rather than just one. Each range therefore indicates whether to use the earliest or latest qualifying position.

[CSS-POSITION-3] [CSS-TRANSFORMS-1]

3.2. Calculating Progress for a View Progress Timeline

Progress (the current time) in a view progress timeline is calculated as: distance ÷ range where:

If the 0% position and 100% position coincide (i.e. the denominator in the current time formula is zero), the timeline is inactive.

In paged media, view progress timelines that would otherwise reference the document viewport are also inactive.

3.3. Anonymous View Progress Timelines

3.3.1. The view() notation

The view() functional notation can be used as a <single-animation-timeline> value in animation-timeline and specifies a view progress timeline in reference to the nearest ancestor scroll container. Its syntax is

<view()> = view( [ <axis> || <'view-timeline-inset'> ]? )

By default, view() references the block axis; as for scroll(), this can be changed by providing an explicit <axis> value.

The optional <'view-timeline-inset'> value provides an adjustment of the view progress visibility range, as defined for view-timeline-inset.

Each use of view() corresponds to its own instance of ViewTimeline in the Web Animations API, even if multiple elements use view() to reference the same element with the same arguments.

3.3.2. The ViewTimeline Interface

dictionary ViewTimelineOptions {
  Element subject;
  ScrollAxis axis = "block";
  (DOMString or sequence<(CSSNumericValue or CSSKeywordValue)>) inset = "auto";
};

[Exposed=Window]
interface ViewTimeline : ScrollTimeline {
  constructor(optional ViewTimelineOptions options = {});
  readonly attribute Element subject;
  readonly attribute CSSNumericValue startOffset;
  readonly attribute CSSNumericValue endOffset;
};

A ViewTimeline is an AnimationTimeline that specifies a view progress timeline. It can be passed to the Animation constructor or the animate() method to link the animation to a view progress timeline.

subject, of type Element, readonly

The element whose principal box’s visibility in the scrollport defines the progress of the timeline.

startOffset, of type CSSNumericValue, readonly

Represents the starting (0% progress) scroll position of the view progress timeline as a length offset (in px) from the scroll origin. Null when the timeline is inactive.

endOffset, of type CSSNumericValue, readonly

Represents the ending (100% progress) scroll position of the view progress timeline as a length offset (in px) from the scroll origin. Null when the timeline is inactive.

Note: The values of startOffset and endOffset are relative to the scroll origin, not the physical top left corner. Depending on the writing mode of the scroll container, they therefore might not match scrollLeft or scrollTop values, for example in the horizontal axis in a right-to-left (rtl) writing mode.

Inherited attributes:

source (inherited from ScrollTimeline)

The nearest ancestor of the subject whose principal box establishes a scroll container, whose scroll position drives the progress of the timeline.

axis (inherited from ScrollTimeline)

Specifies the axis of scrolling that drives the progress of the timeline. See <axis>, above.

currentTime (inherited from AnimationTimeline)

Represents the current progress of the view progress timeline as a percentage CSSUnitValue representing its scroll container’s scroll progress at that position. Null when the timeline is inactive.

ViewTimeline(options)

Creates a new ViewTimeline object using the following procedure:

  1. Let timeline be the new ViewTimeline object.

  2. Set the subject and axis properties of timeline to the corresponding values from options.

  3. Set the source of timeline to the subject’s nearest ancestor scroll container element.

  4. If a DOMString value is provided as an inset, parse it as a <'view-timeline-inset'> value; if a sequence is provided, the first value represents the start inset and the second value represents the end inset. If the sequence has only one value, it is duplicated. If it has zero values or more than two values, or if it contains a CSSKeywordValue whose value is not "auto", throw a TypeError.

    These insets define the ViewTimeline’s view progress visibility range.

If the source or subject of a ViewTimeline is an element whose principal box does not exist, or if its nearest ancestor scroll container has no scrollable overflow (or if there is no such ancestor, e.g. in print media), then the ViewTimeline is inactive.

The values of subject, source, and currentTime are all computed when any of them is requested or updated.

3.4. Named View Progress Timelines

View progress timelines can also be defined declaratively and then referenced by name by elements within the name’s scope (see § 4.2 Named Timeline Scoping and Lookup).

Such named view progress timelines are declared in the coordinated value list constructed from the view-timeline-* properties, which form a coordinating list property group with view-timeline-name as the coordinating list base property. See CSS Values 4 § A Coordinating List-Valued Properties.

3.4.1. Naming a View Progress Timeline: the view-timeline-name property

Name: view-timeline-name
Value: [ none | <dashed-ident> ]#
Initial: none
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: the keyword none or a list of CSS identifiers
Canonical order: per grammar
Animation type: not animatable

Specifies names for the named view progress timelines associated with this element.

3.4.2. Axis of a View Progress Timeline: the view-timeline-axis property

Name: view-timeline-axis
Value: [ block | inline | x | y ]#
Initial: block
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: a list of the keywords specified
Canonical order: per grammar
Animation type: not animatable

Specifies the axis of any named view progress timelines derived from this element’s principal box.

Values are as defined for view().

3.4.3. Inset of a View Progress Timeline: the view-timeline-inset property

Name: view-timeline-inset
Value: [ [ auto | <length-percentage> ]{1,2} ]#
Initial: auto
Applies to: all elements
Inherited: no
Percentages: relative to the corresponding dimension of the relevant scrollport
Computed value: a list consisting of two-value pairs representing the start and end insets each as either the keyword auto or a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Specifies an inset (positive) or outset (negative) adjustment of the scrollport when determining whether the box is in view when setting the bounds of the corresponding view progress timeline. The first value represents the start inset in the relevant axis; the second value represents the end inset. If the second value is omitted, it is set to the first. The resulting range of the scrollport is the view progress visibility range.

auto
Indicates to use the value of scroll-padding.
<length-percentage>
Like scroll-padding, defines an inward offset from the corresponding edge of the scrollport.

3.4.4. View Timeline Shorthand: the view-timeline shorthand

Name: view-timeline
Value: [ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]#
Initial: see individual properties
Applies to: all elements
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Animation type: see individual properties
Canonical order: per grammar

This property is a shorthand for setting view-timeline-name, view-timeline-axis, and view-timeline-inset in a single declaration.

4. Attaching Animations to Scroll-driven Timelines

Animations can be attached to scroll-driven timelines using the scroll-timeline property (in CSS) or the AnimationTimeline parameters (in the Web Animations API). The timeline range to which their active interval is attached can also be further restricted to a particular timeline range (see Attaching Animations to Timeline Ranges).

Time-based delays (animation-delay) get converted to their respective proportions as described in Web Animations 2 § 3.3 Animations

4.1. Finite Timeline Calculations

Unlike time-driven timelines, scroll-driven timelines are finite, thus scroll-driven animations are always attached to a finite attachment range—​which may be further limited by animation-range (see Appendix A: Timeline Ranges). The animation’s iterations (animation-iteration-count) are set within the limits of this finite range. If the specified duration is auto, then the remaining range is divided by its iteration count (animation-iteration-count) to find the used duration.

Note: If the animation has an infinite iteration count, each iteration duration—​and the resulting active duration—​will be zero.

Animations that include absolutely-positioned keyframes (those pinned to a specific point on the timeline, e.g. using named timeline range keyframe selectors in @keyframes) are assumed to have an iteration count of 1 for the purpose of finding those keyframes’ positions relative to 0% and 100%; the entire animation is then scaled to fit the iteration duration and repeated for each iteration.

Note: It’s unclear what the use case might be for combining absolutely-positioned keyframes with iteration counts above 1; this at least gives a defined behavior. (An alternative, but perhaps weirder, behavior would be to take such absolutely-positioned keyframes “out of flow” while iterating the remaining keyframes.) The editors would be interested in hearing about any real use cases for multiple iterations here.

4.2. Named Timeline Scoping and Lookup

A named scroll progress timeline or view progress timeline is referenceable by:

Note: The timeline-scope property can be used to declare the name of a timeline on an ancestor of its defining element, effectively expanding its scope beyond that element’s subtree.

If multiple elements have declared the same timeline name, the matching timeline is the one declared on the nearest element in tree order. In case of a name conflict on the same element, names declared later in the naming property (scroll-timeline-name, view-timeline-name) take precedence, and scroll progress timelines take precedence over view progress timelines.

Using timeline-scope, an element can refer to timelines bound to elements that are siblings, cousins, or even descendants. For example, the following creates an animation on an element that is linked to a scroll progress timeline defined by the subsequent sibling.
<style>
  @keyframes anim {
    from { color: red; }
    to { color: green; }
  }

  .root {
    /* declares the scope of a 'scroller' timeline to reach all descendants */
    timeline-scope: scroller;
  }

  .root .animation {
    animation: anim;
    /* references the 'scroller' timeline for driving the progress of 'anim' */
    animation-timeline: scroller;
  }

  .root .animation + .scroller {
    /* attaches a scroll progress timeline to the timeline name 'scroller' */
    scroll-timeline: scroller;
  }
</style>
&hellip;
<section class="root">
  <div class="animation">Animating Box</div>
  <div class="scroller">Scrollable Box</div>
</section>

4.3. Animation Events

Scroll-driven animations dispatch all the same animation events as the more typical time-driven animations as described in Web Animations § 4.5.18 Animation events, CSS Animations 1 § 5 Animation Events, and CSS Animations 2 § 5.1 Event dispatch.

Note: When scrolling backwards, the animationstart event will fire at the end of the active interval, and the animationend event will fire at the start of the active interval. However, since the finish event is about entering the finished play state, it only fires when scrolling forwards.

5. Frame Calculation Details

5.1. HTML Processing Model: Event loop

The ability for scrolling to drive the progress of an animation, gives rise to the possibility of layout cycles, where a change to a scroll offset causes an animation’s effect to update, which in turn causes a new change to the scroll offset.

To avoid such layout cycles, animations with a scroll progress timeline update their current time once during step 7.10 of the HTML Processing Model event loop, as step 1 of update animations and send events.

During step 7.14.1 of the HTML Processing Model, any created scroll progress timelines or view progress timelines are collected into a stale timelines set. After step 7.14 if any timelines' named timeline ranges have changed, these timelines are added to the stale timelines set. If there are any stale timelines, they now update their current time and associated ranges, the set of stale timelines is cleared and we run an additional step to recalculate styles and update layout.

Note: We check for layout changes after dispatching any ResizeObservers intentionally to take programmatically sized elements into account.

Note: As we only gather stale timelines during the first style and layout calculation, this can only directly cause one additional style recalculation. Other APIs which require another update should be checked in the same step and be updated at the same time.

Note: Without this additional round of style and layout, initially stale timelines would remain stale (i.e. they would not have a current time) for the remainder of the frame where the timeline was created. This means that animations linked to such a timeline would not produce any effect value for that frame, which could lead to an undesirable initial "flash" in the rendered output.

Note: This section has no effect on forced style and layout calculations triggered by getComputedStyle() or similar. In other words, initially stale timelines are visible as such through those APIs.

If the final style and layout update would result in a change in the time or scope (see timeline-scope) of any scroll progress timelines or view progress timelines, they will not be re-sampled to reflect the new state until the next update of the rendering.

Nothing in this section is intended to require that scrolling block on layout or script. If a user agent normally composites frames where scrolling has occurred but the consequences of scrolling have not been fully propagated in layout or script (for example, scroll event listeners have not yet run), the user agent may likewise choose not to sample scroll-driven animations for that composited frame. In such cases, the rendered scroll offset and the state of a scroll-driven animation may be inconsistent in the composited frame.

When updating timeline current time, the start time of any attached animation is conditionally updated. For each attached animation, run the procedure for calculating an auto-aligned start time.

6. Privacy Considerations

There are no known privacy impacts of the features in this specification.

7. Security Considerations

There are no known security impacts of the features in this specification.

Appendix A: Timeline Ranges

This section should move to CSS-ANIMATIONS-2 and WEB-ANIMATIONS-2.

This appendix introduces the concepts of named timeline ranges and animation attachment ranges to CSS Animations and Web Animations.

Named Timeline Ranges

A named timeline range is a named segment of an animation timeline. The start of the segment is represented as 0% progress through the range; the end of the segment is represented as 100% progress through the range. Multiple named timeline ranges can be associated with a given timeline, and multiple such ranges can overlap. For example, the contain range of a view progress timeline overlaps with its cover range. Named timeline ranges are represented by the <timeline-range-name> value type, which indicates a CSS identifier representing one of the predefined named timeline ranges.

Note: In this specification, named timeline ranges must be defined to exist by a specification such as [SCROLL-ANIMATIONS-1]. A future level may introduce APIs for authors to declare their own custom named timeline ranges.

Named Timeline Range Keyframe Selectors

Named timeline range names and percentages can be used to attach keyframes to specific progress points within the named timeline range. The CSS @keyframes rule is extended thus:

<keyframe-selector> = from | to | <percentage [0,100]> | <timeline-range-name> <percentage>

where <timeline-range-name> is the CSS identifier that represents a chosen predefined named timeline range, and the <percentage> after it represents the percentage progress between the start and end of that named timeline range.

Keyframes are attached to the specified point in the timeline. If the timeline does not have a corresponding named timeline range, then any keyframes attached to points on that named timeline range are ignored. It is possible that these attachment points are outside the active interval of the animation; in these cases the automatic from (0%) and to (100%) keyframes are only generated for properties that don’t have keyframes at or earlier than 0% or at or after 100% (respectively).

Attaching Animations to Timeline Ranges

A set of animation keyframes can be attached in reference to an animation attachment range, restricting the animation’s active interval to that range of a timeline, with the animation-range properties. Delays (see animation-delay) are set within this restricted range, further reducing the time available for auto durations and infinite iterations.

Note: animation-range can expand the attachment range as well as constrict it.

Any frames positioned outside the attachment range are used for interpolation as needed, but are outside the active interval and therefore dropped from the animation itself, effectively truncating the animation at the end of its attachment range.

range start┐             ╺┉┉active interval┉┉╸           ┌range end
┄┄┄┄┄┄┄┄┄┄┄├─────────────╊━━━━━━━━━━━━━━━━━━━╉───────────┤┄┄┄┄┄┄┄┄
           ╶┄start delay┄╴                   ╶┄end delay┄╴
                         ╶┄┄┄┄┄ duration┄┄┄┄┄╴

The animation-range properties are reset-only sub-properties of the animation shorthand.

Define application to time-driven animations.

Specifying an Animation’s Timeline Range: the animation-range shorthand

Name: animation-range
Value: [ <'animation-range-start'> <'animation-range-end'>? ]#
Initial: see individual properties
Applies to: see individual properties
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Animation type: see individual properties
Canonical order: per grammar

The animation-range property is a shorthand that sets animation-range-start and animation-range-end together in a single declaration, associating the animation with the specified animation attachment range.

If <'animation-range-end'> is omitted and <'animation-range-start'> includes a <timeline-range-name> component, then animation-range-end is set to that same <timeline-range-name> and 100%. Otherwise, any omitted longhand is set to its initial value.

The following sets of declarations show an animation-range shorthand declaration followed by its equivalent animation-range-start and animation-range-end declarations:
animation-range: entry 10% exit 90%;
animation-range-start: entry 10%;
animation-range-end: exit 90%;

animation-range: entry;
animation-range-start: entry 0%;
animation-range-end: entry 100%;

animation-range: entry exit;
animation-range-start: entry 0%;
animation-range-end: exit 100%;

animation-range: 10%;
animation-range-start: 10%;
animation-range-end: normal;

animation-range: 10% 90%;
animation-range-start: 10%;
animation-range-end: 90%;

animation-range: entry 10% exit;
animation-range-start: entry 10%;
animation-range-end: exit 100%;

animation-range: 10% exit 90%;
animation-range-start: 10%;
animation-range-end: exit 90%;

animation-range: entry 10% 90%;
animation-range-start: entry 10%;
animation-range-end: 90%;

What’s the best way to handle defaulting of omitted values here? [Issue #8438]

Specifying an Animation’s Timeline Range Start: the animation-range-start property

Name: animation-range-start
Value: [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
Initial: normal
Applies to: all elements
Inherited: no
Percentages: relative to the specified named timeline range if one was specified, else to the entire timeline
Computed value: list, each item either the keyword normal or a timeline range and progress percentage
Canonical order: per grammar
Animation type: not animatable

Specifies the start of the animations’s attachment range, shifting the start time of the animation (i.e. where keyframes mapped to 0% progress are attached when the iteration count is 1) accordingly.

Values have the following meanings:

normal
The start of the animation’s attachment range is the start of its associated timeline; the start of the animation’s active interval is determined as normal.
<length-percentage>
The animation attachment range starts at the specified point on the timeline measuring from the start of the timeline.
<timeline-range-name> <length-percentage>?
The animation attachment range starts at the specified point on the timeline measuring from the start of the specified named timeline range. If the <length-percentage> is omitted, it defaults to 0%.

Specifying an Animation’s Timeline Range End: the animation-range-end property

Name: animation-range-end
Value: [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
Initial: normal
Applies to: all elements
Inherited: no
Percentages: relative to the specified named timeline range if one was specified, else to the entire timeline
Computed value: list, each item either the keyword normal or a timeline range and progress percentage
Canonical order: per grammar
Animation type: not animatable

Specifies the end of the animations’s attachment range, potentially shifting the end time of the animation (i.e. where keyframes mapped to 100% progress are attached when the iteration count is 1) and/or truncating the animation’s active interval.

Values have the following meanings:

normal
The end of the animation’s attachment range is the end of its associated timeline; the end of the animation’s active interval is determined as normal.
<length-percentage>
The animation attachment range ends at the specified point on the timeline measuring from the start of the timeline.
<timeline-range-name> <length-percentage>?
The animation attachment range ends at the specified point on the timeline measuring from the start of the specified named timeline range. If the <length-percentage> is omitted, it defaults to 100%.

Appendix B: Timeline Name Scope

This section should move to CSS-ANIMATIONS-2.

This appendix introduces the timeline-scope property, which allows declaring a timeline name’s scope on an ancestor of the timeline’s defining element.

Declaring a Named Timeline’s Scope: the timeline-scope property

Name: timeline-scope
Value: none | all | <dashed-ident>#
Initial: none
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: the keyword none or a list of CSS identifiers
Canonical order: per grammar
Animation type: not animatable

This property declares the scope of the specified timeline names to extend across this element’s subtree. This allows a named timeline (such as a named scroll progress timeline or named view progress timeline) to be referenced by elements outside the timeline-defining element’s subtree—​for example, by siblings, cousins, or ancestors. It also blocks descendant timelines with the specified names from being referenced from outside this subtree, and ancestor timelines with the specified names from being referenced within this subtree.

There’s some open discussion about these blocking effects. [Issue #8915]

Values have the following meanings:

none
No changes in timeline name scope.
all
Declares the names of all timelines defined by descendants—​whose scope is not already explicitly declared by a descendant using timeline-scope—​to be in scope for this element and its descendants.
<dashed-ident>
Declares the name of a matching named timeline defined by a descendant—​whose scope is not already explicitly declared by a descendant using timeline-scope—​to be in scope for this element and its descendants.

If no such timeline exists, or if more than one such timeline exists, instead declares an inactive timeline with the specified name.

Note: This property cannot affect or invalidate any timeline name lookups within the subtree of a descendant element that declares the same name. See Declaring a Named Timeline’s Scope: the timeline-scope property.

8. Changes

Changes since the (28 April 2023) Working Draft include:

See also Earlier Changes.

Conformance

Document conventions

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this:

This is an example of an informative example.

Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this:

Note, this is an informative note.

Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <strong class="advisement">, like this: UAs MUST provide an accessible alternative.

Tests

Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative.


Conformance classes

Conformance to this specification is defined for three conformance classes:

style sheet
A CSS style sheet.
renderer
A UA that interprets the semantics of a style sheet and renders documents that use them.
authoring tool
A UA that writes a style sheet.

A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.

A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)

An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module.

Partial implementations

So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

Implementations of Unstable and Proprietary Features

To avoid clashes with future stable CSS features, the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS.

Non-experimental implementations

Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec.

To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.

Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/. Questions should be directed to the [email protected] mailing list.

Index

Terms defined by this specification

Terms defined by reference

References

Normative References

[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. URL: https://drafts.csswg.org/css-align/
[CSS-ANIMATIONS-1]
David Baron; et al. CSS Animations Level 1. URL: https://drafts.csswg.org/css-animations/
[CSS-ANIMATIONS-2]
David Baron; Brian Birtles. CSS Animations Level 2. URL: https://drafts.csswg.org/css-animations-2/
[CSS-BOX-4]
Elika Etemad. CSS Box Model Module Level 4. URL: https://drafts.csswg.org/css-box-4/
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. URL: https://drafts.csswg.org/css-cascade-5/
[CSS-DISPLAY-4]
CSS Display Module Level 4. Editor's Draft. URL: https://drafts.csswg.org/css-display-4/
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. URL: https://drafts.csswg.org/css-overflow-3/
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr.. CSS Positioned Layout Module Level 3. URL: https://drafts.csswg.org/css-position-3/
[CSS-SCOPING-1]
Tab Atkins Jr.; Elika Etemad. CSS Scoping Module Level 1. URL: https://drafts.csswg.org/css-scoping/
[CSS-SCROLL-SNAP-1]
Matt Rakow; et al. CSS Scroll Snap Module Level 1. URL: https://drafts.csswg.org/css-scroll-snap-1/
[CSS-SHAPES-2]
CSS Shapes Module Level 2. Editor's Draft. URL: https://drafts.csswg.org/css-shapes-2/
[CSS-TYPED-OM-1]
Tab Atkins Jr.; François Remy. CSS Typed OM Level 1. URL: https://drafts.css-houdini.org/css-typed-om-1/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. URL: https://drafts.csswg.org/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. URL: https://drafts.csswg.org/css-values-4/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. URL: https://drafts.csswg.org/css-writing-modes-4/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. URL: https://drafts.csswg.org/css2/
[CSSOM-VIEW-1]
Simon Pieters. CSSOM View Module. URL: https://drafts.csswg.org/cssom-view/
[DOM]
Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[INFRA]
Anne van Kesteren; Domenic Denicola. Infra Standard. Living Standard. URL: https://infra.spec.whatwg.org/
[MEDIAQUERIES-5]
Dean Jackson; et al. Media Queries Level 5. URL: https://drafts.csswg.org/mediaqueries-5/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[SCROLL-ANIMATIONS-1]
Brian Birtles; et al. Scroll-driven Animations. URL: https://drafts.csswg.org/scroll-animations-1/
[SELECTORS-4]
Elika Etemad; Tab Atkins Jr.. Selectors Level 4. URL: https://drafts.csswg.org/selectors/
[WEB-ANIMATIONS-1]
Brian Birtles; et al. Web Animations. URL: https://drafts.csswg.org/web-animations-1/
[WEB-ANIMATIONS-2]
Brian Birtles; Robert Flack. Web Animations Level 2. URL: https://drafts.csswg.org/web-animations-2/
[WEBIDL]
Edgar Chen; Timothy Gu. Web IDL Standard. Living Standard. URL: https://webidl.spec.whatwg.org/

Informative References

[CSS-TRANSFORMS-1]
Simon Fraser; et al. CSS Transforms Module Level 1. URL: https://drafts.csswg.org/css-transforms/
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). URL: https://drafts.csswg.org/cssom/
[RESIZE-OBSERVER-1]
Aleks Totic; Greg Whitworth. Resize Observer. URL: https://drafts.csswg.org/resize-observer/

Property Index

Name Value Initial Applies to Inh. %ages Anim­ation type Canonical order Com­puted value
animation-range [ <'animation-range-start'> <'animation-range-end'>? ]# see individual properties see individual properties see individual properties see individual properties see individual properties per grammar see individual properties
animation-range-end [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]# normal all elements no relative to the specified named timeline range if one was specified, else to the entire timeline not animatable per grammar list, each item either the keyword normal or a timeline range and progress percentage
animation-range-start [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]# normal all elements no relative to the specified named timeline range if one was specified, else to the entire timeline not animatable per grammar list, each item either the keyword normal or a timeline range and progress percentage
scroll-timeline [ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]# see individual properties all elements no see individual properties not animatable per grammar see individual properties
scroll-timeline-axis [ block | inline | x | y ]# block all elements no n/a not animatable per grammar a list of the keywords specified
scroll-timeline-name [ none | <dashed-ident> ]# none all elements no n/a not animatable per grammar the keyword none or a list of CSS identifiers
timeline-scope none | all | <dashed-ident># none all elements no n/a not animatable per grammar the keyword none or a list of CSS identifiers
view-timeline [ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]# see individual properties all elements see individual properties see individual properties see individual properties per grammar see individual properties
view-timeline-axis [ block | inline | x | y ]# block all elements no n/a not animatable per grammar a list of the keywords specified
view-timeline-inset [ [ auto | <length-percentage> ]{1,2} ]# auto all elements no relative to the corresponding dimension of the relevant scrollport by computed value type per grammar a list consisting of two-value pairs representing the start and end insets each as either the keyword auto or a computed <length-percentage> value
view-timeline-name [ none | <dashed-ident> ]# none all elements no n/a not animatable per grammar the keyword none or a list of CSS identifiers

IDL Index

enum ScrollAxis {
  "block",
  "inline",
  "x",
  "y"
};

dictionary ScrollTimelineOptions {
  Element? source;
  ScrollAxis axis = "block";
};

[Exposed=Window]
interface ScrollTimeline : AnimationTimeline {
  constructor(optional ScrollTimelineOptions options = {});
  readonly attribute Element? source;
  readonly attribute ScrollAxis axis;
};

dictionary ViewTimelineOptions {
  Element subject;
  ScrollAxis axis = "block";
  (DOMString or sequence<(CSSNumericValue or CSSKeywordValue)>) inset = "auto";
};

[Exposed=Window]
interface ViewTimeline : ScrollTimeline {
  constructor(optional ViewTimelineOptions options = {});
  readonly attribute Element subject;
  readonly attribute CSSNumericValue startOffset;
  readonly attribute CSSNumericValue endOffset;
};

Issues Index

While 0% will usually represent the scroll container’s initial scroll position, it might not depending on its content distribution. See CSS Box Alignment 3 § 5.3 Overflow and Scroll Positions. Is this what we want?
Add a note about whether currentTime can be negative or > 100%.
Insert diagrams.
This section should move to CSS-ANIMATIONS-2 and WEB-ANIMATIONS-2.
Define application to time-driven animations.
What’s the best way to handle defaulting of omitted values here? [Issue #8438]
This section should move to CSS-ANIMATIONS-2.
There’s some open discussion about these blocking effects. [Issue #8915]
MDN

ScrollTimeline/ScrollTimeline

In only one current engine.

FirefoxNoneSafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

ScrollTimeline/axis

In only one current engine.

FirefoxNoneSafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

ScrollTimeline

In only one current engine.

FirefoxNoneSafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

ViewTimeline/ViewTimeline

In only one current engine.

FirefoxNoneSafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

ViewTimeline/endOffset

In only one current engine.

FirefoxNoneSafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

ViewTimeline

In only one current engine.

FirefoxNoneSafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

animation-range-end

In only one current engine.

FirefoxNoneSafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

animation-range-start

In only one current engine.

FirefoxNoneSafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

animation-range

In only one current engine.

FirefoxNoneSafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

animation-timeline/scroll

Firefox110+SafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

animation-timeline/view

Firefox🔰 114+SafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

scroll-timeline-axis

Firefox111+SafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

scroll-timeline-name

Firefox111+SafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

scroll-timeline

Firefox111+SafariNoneChrome111+
Opera?Edge111+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

timeline-scope

In only one current engine.

FirefoxNoneSafariNoneChrome🔰 116+
Opera?Edge🔰 116+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

view-timeline-axis

Firefox114+SafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

view-timeline-inset

In only one current engine.

FirefoxNoneSafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

view-timeline-name

Firefox🔰 111+SafariNoneChrome115+
Opera?Edge115+
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

view-timeline

In only one current engine.

Firefox114+SafariNoneChromeNone
Opera?EdgeNone
Edge (Legacy)?IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?