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

@flackr, yes, as I understood it from stateful events:

> If it’s stateful, it has a binary trigger state associated with it, initially "inactive": while "inactive", it only activates when the defining element receives one of its [enter events](https://drafts.csswg.org/animation-triggers-1/#event-trigger-enter-event), performing an associated enter action and switching its [trigger state](https://drafts.csswg.org/animation-triggers-1/#event-trigger-trigger-state) to "active"; while "active", it only deactivates when it receives one of its [exit events](https://drafts.csswg.org/animation-triggers-1/#event-trigger-exit-event), performing an associated exit action and switching its trigger state back to "inactive".

You can't re-trigger any state, you can only switch states, and therefor making this behavior impossible. I thought that was the whole intention of stateful triggers. So basically, stateful (and timeline) triggers only trigger on state change.

And with stateless, as I understood it, you can re-trigger, since the state is ignored.

So, IIUC, we should simply enphasize that when `finished` the trigger still maintains its state, right?

@bramus,

> <p dir="auto" style="box-sizing: border-box; margin-top: 0px !important; margin-bottom: 16px; color: rgb(240, 246, 252); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, &quot;Noto Sans&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(13, 17, 23); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">IIUC you are proposing this:</p><markdown-accessiblity-table data-catalyst="" style="box-sizing: border-box; display: block; color: rgb(240, 246, 252); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, &quot;Noto Sans&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(13, 17, 23); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
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() —
>
> </markdown-accessiblity-table><p dir="auto" style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(240, 246, 252); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, &quot;Noto Sans&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(13, 17, 23); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Wouldn’t that prevent<span> </span><code class="notranslate" style="box-sizing: border-box; font-family: &quot;Monaspace Neon&quot;, ui-monospace, SFMono-Regular, &quot;SF Mono&quot;, Menlo, Consolas, &quot;Liberation Mono&quot;, monospace; font-size: 11.9px; tab-size: 4; white-space: break-spaces; background-color: rgba(101, 108, 118, 0.2); border-radius: 6px; margin: 0px; padding: 0.2em 0.4em;">--depress</code><span> </span>from actually playing the already finished animation?</p>

Not exactly, since you do want to allow triggering a switch to the other state on `finished`.

-- 
GitHub Notification of comment by ydaniv
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13643#issuecomment-4053847298 using your GitHub account


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

Received on Friday, 13 March 2026 09:33:42 UTC