animation-trigger

The Chrome team has shipped a draft implementation of the CSS animation‑trigger property, defined in the Animation Triggers specification. The property pairs a named trigger—set via timeline‑trigger or event‑trigger—with actions such as play, pause, reset, or replay, allowing a CSS animation to wait until a scroll position or DOM event fires. In practice, a developer can declare a timeline trigger on a parent element (e.g., `timeline-trigger: --show scroll() contain / cover;`) and then attach `animation-trigger: --show play;` to a child, eliminating the need for Intersection Observer callbacks or external animation libraries. Chrome 145 is the only browser that currently implements this, and the spec remains in editor’s draft, meaning the syntax and behavior could still evolve.

This move extends the long‑standing trend of moving interaction logic into the stylesheet layer. Earlier CSS features—such as view timelines, scroll‑linked animations, and the Web Animations API—already let developers tie visual changes to scroll or viewport changes, but they required JavaScript glue to fire at a specific moment. By providing a declarative trigger mechanism, Chrome is positioning CSS as a full‑stack solution for common UI patterns like lazy‑load reveals, scroll‑based storytelling, and click‑activated effects. Competing browsers have lagged in adopting similar capabilities, and JavaScript‑centric libraries like GSAP or ScrollMagic continue to dominate the market. If other engines follow suit, the balance could shift toward lighter, CSS‑only implementations that reduce bundle size and simplify maintenance.

The immediate impact is limited: only Chrome 145+ users will see the feature, and developers must guard against the draft status with feature queries (`@supports (animation-trigger: --x play)`). Because the spec may change before reaching Candidate Recommendation, early adopters risk future refactoring. Nonetheless, the performance promise—animations driven directly by the compositor without a JavaScript bridge—makes the property attractive for high‑frame‑rate sites. Watch for Chrome’s upcoming release notes, for any sign that Edge or Safari plan to mirror the implementation, and for the spec’s progression to a stable recommendation, which will likely trigger broader tooling support and polyfill strategies.