Re: [csswg-drafts] [web-animations-2][css-animations-2] animation-trigger CSS syntax (#12652)

I though about this a bit more, I also don't see any difference between allowing `viewenter`/`viewleave` events and allowing arbitrary `enter`/`exit` actions and/or multiple timeline triggers, or together with event triggers. Unless I'm missing something, this goes back to the same issues that @flackr said we want to prevent.

So if I understand this correctly, unless we solve multiple timelines' enter/leave events, we have to restrict triggers to either being a single timeline trigger, or multiple (or single) event triggers. And this leads us closer to **option 2** in your (@DavMila) suggestions.
I also don't think we need to have 2 names scoped to an element to create a binding, but I see you already addressed that here, which is great.

------------

However, one thing I want to regress to is the higher-level behaviors we started with, as in `once`, `repeat`, `alternate`, and `state`. I really don't think we have any valid use-cases for splitting those, or mix and matching stuff like `reset` and `pause`.
I strongly believe not starting with triggers simply playing an animation by default, and have a matching invert action, could be a bad design, even a footgun, especially when we're just starting with level 1 of this feature.
And I think we can start with a syntax that will allow later enhancement with the broken-down actions later if necessary.

------

So, with all the above in mind I think the syntax for the `event-trigger` shorthand becomes simply:

```IDL
event-trigger: [ <dashed-ident> <type>+ ]#
```

And the `timeline-trigger` shorthand becomes:

```IDL
timeline-trigger: [ <dashed-ident> <single-animation-timeline> [ <timeline-range-start> <timeline-range-end>? ]? [ / [ <timeline-range-start> <timeline-range-end>? ]? ]? ]#
```

And the `animation-trigger` shorthand becomes:

```IDL
<event-trigger>: <dashed-ident>+ [ / <dashed-ident>+ ]?, <trigger-behavior>?
<timeline-trigger>: <dashed-ident>, <trigger-behavior>?
<single-animation-trigger>: event-trigger(<event-trigger>) | timeline-trigger(<timeline-trigger>)

animation-trigger: <single-animation-trigger>#
```

You can see that:
* `event-trigger` simply becomes a coordinated list of names and a space separated list of event types.
* `timeline-trigger` becomes a coordinated list of names, timelines, and ranges.
* `animation-trigger` becomes a coordinated list of a single function, either event or timeline.
* The `timeline-trigger()` function allow a single timeline trigger with enter/exit tied implicitly to same trigger, and hence to a single timeline, and can't be used with another event trigger - plus a behavior.
* The `event-trigger()` function allow a space separated list of entry triggers (at least one), and optionally a space separated list of exit (i.e. reverse/reset/pause) triggers - plus a behavior.

I think this proposal allows everything we wanted to allowed for level 1 while plus avoiding the issues.
And I think it also allows us to later develop this in other directions.

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


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

Received on Wednesday, 27 August 2025 15:54:09 UTC