[csswg-drafts] [web-animations-2] Add web-animation animation events equivalent to css-animations and css-transitions. (#8544)

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

== [web-animations-2] Add web-animation animation events equivalent to css-animations and css-transitions. ==
[css-animations-2 4.1. Event dispatch](https://drafts.csswg.org/css-animations-2/#event-dispatch) defines animationstart, animationend and animationcancel events which fire anytime the effect phase changes. [css-transitions-2 5.1 Event dispatch](https://drafts.csswg.org/css-transitions-2/#event-dispatch) defines transitionstart, transitionend and transitioncancel for the equivalent changes in phase.

[web-animations-1 4.18.2. Animation playback events](https://drafts.csswg.org/web-animations-1/#animation-playback-events) only defines finish, cancel and remove events.
* The cancel event seems to be equivalent when it fires to animationcancel and transitioncancel (entering the idle state), so this is already covered
* The finish event is strictly only fired when the animation enters the [finish play state](https://www.w3.org/TR/web-animations-1/#finished-play-state) which is only true if the time is at the playback direction relative end of the animation. With scroll-animations-1 animations do not strictly advance time following their playbackRate. We could update this to fire in the same conditions as animationend/transitionend however this would be inconsistent with the state you enter when calling `animation.finish()`.
* None of the events are equivalent to animationstart/transitionstart. The closest is the ready promise but this is telling a developer when the system has successfully begun using an animation, not when it starts (i.e. only fires once).

I propose that we add `start` and `end` web-animations events corresponding to the animationstart/transitionstart and animationend/transitionend cases (e.g. corresponding to phase changes).

See the following demo (in a browser supporting scroll linked animations, e.g. chrome canary with experimental web platform features turned on) for a demo of the current state: https://jsbin.com/xuwebet/edit?css,js,output

@birtles WDYT?

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


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

Received on Wednesday, 8 March 2023 17:51:15 UTC