Web developers have long relied on JavaScript solutions, such as the Intersection Observer API, to control when animations fire based on a user’s scroll position. However, a new proposal working its way through the CSS Working Group aims to shift that capability entirely into native stylesheets. Defined in the developing Animation Triggers specification, the new CSS animation-trigger property allows developers to delay the start of a CSS animation until a specific trigger occurs, fundamentally changing how dynamic web interfaces are built.
Currently labeled as experimental, the feature is designed to listen for a named trigger and control how an animation plays or pauses in response. Rather than forcing developers to write custom JavaScript event listeners to toggle classes or manage Intersection Observers when elements enter the viewport, the animation-trigger property handles this declarative behavior natively.
To understand how the feature works in practice, consider a basic implementation where an element uses an animation alongside a trigger declaration. By assigning an animation name and duration, and coupling it with an animation-trigger property referencing a specific trigger identifier, the browser manages the playback states—such as playing forwards or backwards—without external scripting.
Syntax and Core Values
The syntax for the property is straightforward, accepting either the keyword none or a comma-separated list of triggers and their corresponding actions. Structurally, the property follows a pattern where a designated trigger name is paired with enter and exit actions, dictating how the target element responds when the trigger condition is met.
The "trigger" referenced in the property can refer to timeline-based triggers, such as scroll or view progress timelines, or event-based triggers like DOM interactions including mouse clicks. While event-based triggers open up interesting interactive possibilities, the primary focus of the specification and current testing centers heavily on timeline triggers tied to the document’s scrolling context.
By default, trigger names possess a global scope throughout the document. If multiple elements define the exact same trigger name, the cascade rules dictate that the element appearing later in the source order takes precedence. For developers needing tighter encapsulation, the specification includes a companion trigger-scope property, which restricts the visibility and scope of a trigger to a specific DOM subtree.
Animation actions associated with these triggers go beyond simple binary states. Developers can configure actions to play forwards, play backwards, or handle entering and exiting behaviors independently, allowing for complex choreography where an element might animate in one direction upon entering the viewport and reverse or alter its playback when exiting.
Understanding Timeline Triggers
To utilize animation-trigger effectively, developers must establish a timeline trigger first. This underlying mechanism controls when an animation begins by monitoring an element’s position relative to a timeline, such as a scroll or viewport progress timeline. The trigger activates specifically when the element enters a defined activation range within that timeline.
Setting up a timeline trigger involves defining a custom trigger name to link it with the animation trigger, followed by a source timeline using functions such as view() or scroll(). Once the source is established, developers specify an activation range, such as contain, which dictates precisely when the trigger turns active inside the viewport.
An optional active range can also be provided to define the outer boundary where the trigger stays active before turning off. If this secondary range is omitted, the browser automatically defaults to the primary activation range. When distinct ranges are used, the active range must encompass the activation range; otherwise, the trigger cannot engage.
While individual longhand properties exist for configuring these parameters, developers are expected to rely primarily on a shorthand syntax. Unlike many traditional CSS shorthands, such as those used for backgrounds or borders, the order of values in the timeline trigger shorthand is strict and cannot be rearranged freely.
An important architectural benefit of this system is that triggers and animations do not need to reside on the same element. A timeline trigger can be defined on a parent container, while the animation-trigger is applied across multiple child elements. When the parent container enters the viewport, all designated children can animate synchronously as a cohesive unit.
Practical Implementation and Use Cases
Demonstrating the practical application of the property involves creating elements that serve as specific trigger points. For instance, defining a timeline trigger on a container element using a scroll-based view function establishes the boundary conditions. When the browser detects that the element has scrolled into the designated view range, the named trigger fires.
Applying the corresponding animation-trigger to targeted text or layout elements allows those elements to respond immediately to the parent or self-contained trigger state. By combining standard CSS transition properties and keyframe animations with these trigger definitions, developers can achieve smooth reveal effects that previously required heavy JavaScript polling.
Furthermore, the same trigger can be reused across different elements with varying animation actions, creating diverse visual responses from a single unified scroll milestone.
Scroll-Triggered Versus Scroll-Driven Animations
A common point of confusion among developers is the distinction between scroll-triggered animations and scroll-driven animations. Although both concepts rely on scroll or view timelines, they operate on fundamentally different principles.
With scroll-driven animations, an animation’s progress is directly and continuously tied to the exact scroll position. As the user scrolls up or down, the animation scrubs forward or backward in absolute synchronization with the timeline, meaning there is no concept of a discrete "start" or "fire" moment. The animation frame exists purely as a function of the scroll offset.
In contrast, scroll-triggered animations are state-based rather than continuous. A trigger maintains a binary state, and when a specific condition is met—such as an element entering a defined viewport range—the trigger fires an associated action, such as playing, pausing, or resetting the animation. Once triggered, the animation runs independently as a regular, time-based CSS animation without any ongoing link to the user’s scroll progress.
Specification Status and Browser Support
The animation-trigger property remains under active development as part of the Animation Triggers specification hosted by the CSS Working Group. Because the specification is currently in the Editor’s Draft stage, the syntax, behavior, and underlying rules are subject to change before the proposal advances toward official Candidate Recommendation status.
Regarding current browser compatibility, implementation is in its very early stages. At the time of writing, support is limited to experimental flags and builds of Chrome version 145 and newer, meaning developers must check browser support carefully before deploying any implementation to production environments.