[css-animations-2][web-animations-2] How should animation-play-state interact with animation-trigger? (original) (raw)

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 and state, and these effects are currently defined by the playing, pausing, and reversing 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 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, if the trigger's timeline has active and inside the attachment range, just as a newly created animation with a play-state set to paused still triggers the animationstart event. However, we may say that animations with a trigger with a view timeilne must only trigger animation events according to their progress inside their attachment range. So for example, animation with animation-trigger: view() repeat will only trigger its animationstart event once it enters its 0-100% range.

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.
• Animation events still trigger normally when paused but only when entering/exiting the trigger's attachment range.

/cc @flackr @DavMila @birtles