CSS animation triggers
The CSS animation triggers module provides functionality for triggering standard time-based CSS animations when a particular trigger occurs, such as the user scrolling an element to a certain scroll offset inside the viewport, or a JavaScript event firing on an element.
Reference
Properties
animation-triggertimeline-triggershorthandtimeline-trigger-activation-rangeshorthandtimeline-trigger-active-rangeshorthandtimeline-trigger-nametimeline-trigger-sourcetrigger-scope
The CSS animation triggers module level 1 also introduces the event-trigger, event-trigger-name, and event-trigger-source properties. Currently, no browsers support these features.
Data types and values
Guides
- Using CSS scroll-triggered animations
-
A guide to implementing CSS scroll-triggered animations.
Related concepts
- CSS animations module
- CSS scroll-driven animations module
Specifications
| Specification |
|---|
| Animation Triggers |
See also
- CSS scroll-triggered animations are coming! on developer.chrome.com (2025)