[csswg-drafts] [css-animations-2][web-animations-2] How should `animation-play-state` interact with `animation-trigger`? (#12064)

ydaniv has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-animations-2][web-animations-2] How should `animation-play-state` interact with `animation-trigger`? ==
Before the addition of `animation-trigger` it was possible to control the playback state of an animation using the `animation-play-state` property or using the Web Animations API via the `.play()`/`.pause()`/`.reverse()` methods or setting the animation's `playbackRate`.

A Trigger applies an effect on its associated animation based on its [type](https://drafts.csswg.org/web-animations-2/#trigger-types) and [state](https://drafts.csswg.org/web-animations-2/#trigger-state), and these effects are currently defined by the [playing](https://drafts.csswg.org/web-animations-2/#playing-an-animation-section), [pausing](https://drafts.csswg.org/web-animations-1/#pausing-an-animation-section), and [reversing](https://drafts.csswg.org/web-animations-1/#reversing-an-animation-section) an animation procedures. That is now yet another method to control playback state.

To resolve conflicts between properties specified in CSS and state changes by usage of the WAAPI, it is [specified](https://www.w3.org/TR/css-animations-2/#animations) how the latter takes precedence over changes to corresponding properties in CSS.

But now we have a new CSS property, `animation-trigger`, that may conflict  with another property, `animation-play-state`, and it may not be trivial to determine how these two properties interact with each other and what should be the playback state when their both specified to non default values.

With the default values for `animation-trigger` being `once auto` we may already have an existing definition of this interaction:

- If the `animation-play-state` is set to `running` then the trigger behaves normally as specified.
- If the `animation-play-state` is set to `paused` then the _trigger's behavior is overridden_ and the animation's playback remains paused. Notice that animation events must still trigger, just as a newly created animation with a `play-state` set to `paused` still triggers the `animationstart` event.

Additionally, changes to playback state via WAAPI continue overriding `animation-play-state` as specified, but don't override changes to `animation-trigger`.

### Proposal 

- `animation-trigger` does not override the behavior of `animation-play-state`.
- If `animation-play-state` is set to `running` then the associated trigger's effects continue as specified.
- If the `animation-play-state` is set to `paused` then the associated trigger's effects are overridden and the animation remains paused.

/cc @flackr @DavMila @birtles 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12064 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 9 April 2025 18:43:44 UTC