[csswg-drafts] [web-animations-1] Clarify when to apply animation effect (#5526)

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

== [web-animations-1] Clarify when to apply animation effect ==
Please forgive me (and tell me) if you think that other places like StackOverflow would have been more suited to ask the following. To be honest, I don't really need to have anything clarified in the specification. I'm just trying to figure out **which part of the specification the current browser behaviors are based on, when deciding to apply or remove the effect** of an animation declared using the programming interface. 

If it is intentional not to specify it precisely, you can avoid reading all of the following and eventually explain me why.

Below are examples of the current (unexpected?) behaviors in Chrome and Firefox.

```js
target.style.opacity = 0.5
const effect = new KeyframeEffect(target, { opacity: [0, 1] }, 100)
const animation = new Animation(effect)
```

```js
animation.play()
console.log(animation.currentTime) // 0
console.log(getComputedStyle(target).opacity) // 0 (instead of 0.5?)
```

```js
animation.play()
animation.cancel()
console.log(animation.currentTime) // null
console.log(getComputedStyle(target).opacity) // 0.5
```

```js
animation.reverse()
console.log(animation.currentTime) // 100
console.log(getComputedStyle(target).opacity) // 0.5 (instead of 1?)
animation.finished.then(() => animation.playbackRate = 1)
```

```js
animation.play()
animation.finish()
console.log(animation.currentTime) // 100
console.log(getComputedStyle(target).opacity) // 0.5 in Firefox (instead of 1, as in Chrome?)
```

In the [introduction](https://drafts.csswg.org/web-animations-1/#introduction-to-the-animation-model) of the animation model, it is stated that *an animation effect has zero or more associated properties that it affects in response to changes to its timing output*. This is the only statement I can find to know when to apply effects. I guess they are removed when applying effects in the after phase.

I understand it as effects are either applied when a procedure to control the playback changes a time value used for the timing output, or as part of the procedure to update animations and sends event. If I'm not mistaken, the event loop model defines that the procedure to update animations and sends events is run after (macro and micro) tasks such as `console.log()`.

When running `play()` or `cancel()`, effect seems to be applied/removed before the procedure to update animations and send events, immediately after running the corresponding method. 

When running `finish()` or `reverse()`, effect seems to be applied with the procedure to update animations and send events.

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


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

Received on Friday, 18 September 2020 10:37:20 UTC