W3C releases draft animation-trigger specification
A technical specification defines mechanisms for triggered animations on the web, extending the Web Animations model with timeline and event triggers, new CSS properties and an associated programming interface.
The CSS Working Group has published a First Public Working Draft of Animation Triggers.
A draft specification defines mechanisms for affecting an animation’s playback on the web based on user‑interaction events or timeline progress. By assigning a trigger to an animation, the animation becomes a ‘triggered animation’, with playback delayed until the trigger occurs.
The draft extends the Web Animations model by introducing two trigger types. Timeline triggers are activated when a timeline enters a defined activation range and deactivated when it leaves that range; they are commonly used with view‑progress timelines. Event triggers are activated by specific DOM events such as click(), keypress() or focusin(). Event triggers can be stateless, with a single action, or stateful, with separate enter and exit actions.
The specification adds CSS properties that implement these concepts, including timeline‑trigger, event‑trigger and animation‑trigger. The trigger‑scope property can limit the scope of a trigger name to a subtree of the document, preventing elements outside that subtree from seeing the trigger.
The draft also defines an imperative API built on the Web Animations API. The AnimationTrigger interface and the AnimationTriggerOptions dictionary allow developers to create trigger objects with configurable activation and active ranges.
The draft states that there are no known privacy impacts of the animation‑trigger features and no known security impacts of the animation‑trigger features. It notes that the additions may affect web‑standard animation playback control, interoperability and accessibility across browsers.
Source: https://www.w3.org/TR/2026/WD-animation-triggers-1-20261020/
