[csswg-drafts] [css-transitions-1] Clarify timing of transitionrun and transitionstart (#11665)

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

== [css-transitions-1] Clarify timing of transitionrun and transitionstart ==
If you load https://flackr.github.io/web-demos/css-transitions/event-timing.html and click the test button you can see the precise ordering of events when a transition is triggered.

Interop difference, Safari notably fires transitionrun, transitionstart before the next requestAnimationFrame, where Chrome and Firefox don't fire these events until the following frame.

Even more surprisingly though, this occurs even if you access the animation immediately calling `target.getAnimations()` (check the flush style checkbox). I think as a developer I would expect that if the animation is returned by getAnimations that it should fire transitionrun as part of [dispatching animation events](https://html.spec.whatwg.org/#event-loop-processing-model:update-animations-and-send-events) before the next [raf](https://html.spec.whatwg.org/#event-loop-processing-model:run-the-animation-frame-callbacks-3)

[transitionrun](https://www.w3.org/TR/css-transitions-1/#transitionrun) says:
> The [transitionrun](https://www.w3.org/TR/css-transitions-1/#transitionrun) event occurs when a transition is created (i.e., when it is added to the set of [running transitions](https://www.w3.org/TR/css-transitions-1/#running-transition)).

Notably, the definition of [running transitions](https://www.w3.org/TR/css-transitions-1/#running-transition) says:
> Each of these transitions also has a start time, end time, start value, end value, reversing-adjusted start value, and reversing shortening factor.

The transition may not yet have a start time if it is composited, which may be a good reason to defer transitionstart, however I think as a developer I would expect transitionrun to fire right away.

Related chromium issue: https://issues.chromium.org/394767658

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


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

Received on Thursday, 6 February 2025 16:27:37 UTC