[csswg-drafts] [css-animations-2] Specify the iteraction between API methods and animation-* properties (#4822)

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

== [css-animations-2] Specify the iteraction between API methods and animation-* properties ==
This is something we've discussed a number of times and the general consensus is that once you tweak a property from the API, any changes to the corresponding markup (`animation-*` property or `@keyframes` rule) is ignored.

Furthermore, the proposal is that this should apply to animation play state too (rather than the very convoluted [behavior that is currently specced](https://drafts.csswg.org/css-animations-2/#interaction-between-animation-play-state-and-web-animations-API) where pause is sticky but play is not).

Once interesting edge case with regards to play state is setting the `startTime` of an animation since that is equivalent to pausing or playing in some cases.

e.g. (1) - no change to play state

```js
div.style.animation = 'anim 10s';
const animation = div.getAnimations()[0];
await animation.ready;
// Seek using the start time. This should probably NOT override animation-play-state.
animation.startTime += 1000;
// This should probably make the animation paused
div.style.animationPlayState = 'paused';
```

e.g. (2) - play state is changed


```js
div.style.animation = 'anim 10s';
const animation = div.getAnimations()[0];
await animation.ready;
// Pause using the start time
animation.startTime = null;
// This will have no effect since the animation is already paused
div.style.animationPlayState = 'paused';
getComputedStyle(div).animationPlayState;
// This should probably have no effect since the author has taken over
// play control of the animation?
div.style.animationPlayState = 'running';
```

That's my intuition anyway. What do others think?

I'm looking to spec this in the next few days so any feedback would be much appreciated.

/cc @graouts @stephenmcgruer @flackr @kevers-google

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

Received on Tuesday, 3 March 2020 07:05:56 UTC