[csswg-drafts] [animation-triggers-1] Should play-forwards and play-backwards have no effect if the animation has already reached its end? (#13643)

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

== [animation-triggers-1] Should play-forwards and play-backwards have no effect if the animation has already reached its end? ==
Currently, the table in [animation-triggers-1](https://drafts.csswg.org/animation-triggers/#animation-trigger-shorthand) says the following above play-forwards and play-backwards:

Keyword | Extra Effect | initial | playing | paused | finished
-- | -- | -- | -- | -- | --
play-forwards | set playback rate to positive | play() | — | play() | play()
play-backwards | set playback rate to negative | play() | — | play() | play()

The reason we wanted to have play-forwards and play-backwards was to support reversing effects, however, if according to the table we call play() when the effect is finished it sounds like we would restart the animation even if it has already reached its end. I think this is not at all what developers would expect.

E.g. suppose a developer sets up an animation on a button:
```css
@keyframes press-animation {
  to: { transform: translate2d(-5px, 5px); }
}

button {
  animation: press-animation forwards;
  event-trigger: --press pointerdown, --depress pointerup;
  animation-trigger: --press play-forward --depress play-backward;
}
```

The intention is clearly that the button should animate to its pressed state, and back, however it may be possible to trigger the pointerup action multiple times (e.g. clicking both buttons one at a time and releasing one at a time). If the user does this, I think the developer would not intend the animation to replay the press animation from the start but rather to just stay pressed.

TLDR; I think we should not play the animation if it is finished after setting the playback rate for `play-forwards` and `play-backwards`

@ydaniv @DavMila 

Note: I think it is not easy to create this degenerate situation with timeline triggers because we don't support multiple triggers yet and stateful triggers won't retrigger the exit state if they didn't first enter the entry state.

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


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

Received on Thursday, 12 March 2026 16:28:56 UTC