- From: Brian Birtles via GitHub <sysbot+gh@w3.org>
- Date: Tue, 03 Mar 2020 07:05:54 +0000
- To: public-css-archive@w3.org
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