# CSS animation-trigger Property for Animation Control

A new CSS property to trigger animations.

- **Source:** [CSS-Tricks (feeds.feedburner.com)](https://css-tricks.com)
- **Published:** 2026-08-26
- **Topic:** [Software & Engineering](https://brifing.si/c/engineering)
- **Original article:** <https://css-tricks.com/almanac/properties/a/animation-trigger/>
- **On Brifing:** https://brifing.si/s/6d205f29-3f7e-4075-9458-3f4526fbd7ae

## What 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.

## Scroll-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.

## animation-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.

## Trigger 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.

## Trigger 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.

## Animation 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.

## Timeline 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.

## Example 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.

## Sources covering this story

- https://css-tricks.com/almanac/properties/a/animation-trigger/ — 

---

_Summary written by Brifing from the original reporting. Copyright in the original article belongs to its publisher; read the full piece at the link above._