CSS animation-trigger Property for Animation Control
A new CSS property to trigger animations.
1What is CSS animation-trigger?
The CSS animation-trigger property delays the start of an animation until a specific trigger occurs. It listens for a named trigger and controls how the animation plays or pauses. Traditionally, this behavior was achieved with JavaScript, particularly the Intersection Observer API.
2Scroll-triggered vs Scroll-driven Animations
Scroll-triggered animations should not be confused with scroll-driven animations. Both rely on scroll or view timelines, but they are fundamentally different concepts. In scroll-driven animations, the animation's progress is directly tied to scroll position, while scroll-triggered animations are state-based.
3animation-trigger Syntax
The animation-trigger property accepts none or a comma-separated list of trigger names and actions. For example, it can be used as animation-trigger: --trigger play-forwards play-backwards;. This property applies to all elements and is not inherited.
4Trigger Types
The animation-trigger property accepts timeline-based triggers (scroll or view progress timelines) or event-based triggers like DOM events. This entry focuses particularly on timeline triggers.
5Trigger Scope
By default, trigger names have a global scope. If multiple elements define the same trigger name, the element that comes later in the cascade gets chosen. The trigger-scope property can be used to restrict the scope of a trigger to a specific DOM subtree.
6Animation Actions
The animation-trigger property supports various actions like play-forwards, play-backwards, play, play-once, pause, reset, replay, and none. These actions control how the animation plays or pauses. Some actions are not exclusively enter or exit actions.
7Timeline Triggers
To use the animation-trigger property, a timeline trigger must first be defined. This trigger controls when an animation starts based on an element's position within a timeline. For example, an animation can start when an element enters the viewport.
8Example Implementation
To create a simple text reveal animation, an element can be used as the trigger point. Once the trigger point is passed, the animation plays and the text fades in. Such animations are an effective method to enhance user experience.