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

> In the [example in your proposal](https://github.com/w3c/csswg-drafts/issues/12652#issue-3352569253) you have 2 names:
> 
> .event_target {
>   animation-trigger: trigger(--event-source, --click-touch play-pause, --press-p play, keypress("r") reset);
> }
> These are 2 idents you need, like:`--event-source` and `--click-touch`. I'm saying you only need one of them.
> 
> And you have 2 sub-properties: `event-trigger-name` and `event-trigger-actions`, which take an ident. I propose to have a coordinated list of `-name` and `-actions`, where you only specify ident in `-name` and corresponding actions (or types, or whatever) in the `-actions` property.
> 
> Correspondingly, The `trigger()` function shouldn't take and extra first ident argument.
> 
> If you proposal does that then I don't see it written there 🤷

I was speaking relative to the syntax that was [resolved on](https://github.com/w3c/csswg-drafts/issues/12611#issuecomment-3206863438) originally which was `trigger(<name>, [<action> <behavior>]+)` and required that authors declared multiple `trigger()` instances or action-behavior arguments.

I think option 1 makes a simple tweak that provides authors considerable flexibility/convenience - they can specify the relevant events either at the source or the target as fits their needs/preference. I think the additional ident hardly poses any additional difficulty with the usability of the API. And with the  added flexibility that it provides, I say it's a pretty good win.

I also like that option 1 is likely closer to what we'll have to declare for the IDL, i.e `AnimationTrigger.addAnimation(animation, action, behavior)` and so is the more consistent and perhaps more author-friendly format.

That being said, there might be tweaks we can make to option 1 that would alleviate the extra ident concern:

1. Each `event-trigger` declaration implicitly establishes a higher-level action of the same name as the trigger. `animation-trigger` can then omit the action `trigger` declarations - the behaviors in such declarations would be associated with the implicitly established higher-level action. For example:

```
.source {
 event-trigger: --trigger-name click touch; /* "click" & "touch" are implicitly associated with an implicitly established higher-level action named "--trigger-name." */
}
.target1 {
 animation-trigger: trigger(--trigger-name, --trigger-name play); /* current proposal; valid & functional */
}
.target2 { 
 animation-trigger: trigger(--trigger-name, play); /* (optional) proposed amendment; also valid & functional; "play" is associated with the implicitly establish --trigger-name action. */
}
``` 
Authors may also declare other higher-level actions.

2. Drop higher-level actions and establish that:
-`event-trigger` actions have to be explicitly declared/established and  are implicitly referred to (using the trigger name) by `animation-trigger`,
-`timeline-trigger` actions (`enter`/`exit`) are implicitly established and `enter` is implicitly referred to by `animation-trigger` while `exit` is treated as the special case and must be explicitly referred to by `animation-trigger`. E.g.

```
.source {
 event-trigger: --event-trigger click touch;
 timeline-trigger: --timeline-trigger;
}

.event-target {
                                 /* Implicitly refers to click and touch actions */
 animation-trigger: trigger(--event-trigger, play-once)
}
.timeline-target {
                                  /* Implicitly refers to enter action; (must) explicitly refers to  exit action*/
 animation-trigger: trigger(--timeline-trigger, play-forwards, exit play-backwards);
}
```

3. Similar to variation 2 but `timeline-trigger`'s `enter` action must also be explicitly referenced by `animation-trigger`:
```
.source {
 event-trigger: --event-trigger click touch;
 timeline-trigger: --timeline-trigger;
}
.event-target {
                                 /* Implicitly refers to click and touch actions */
 animation-trigger: trigger(--event-trigger, play-once)
}
.timeline-target {
                                  /* (Must) Explicitly refers to enter action; (must) explicitly refers to  exit action*/
 animation-trigger: trigger(--timeline-trigger, enter play-forwards, exit play-backwards);
}
```
The goal of deviating from variant 2 being to establish a bit more symmetry between the  `enter` and `exit` actions of timeline-trigger.

I propose we go with the 3rd variation but I'm more than happy to go with either of the other 2.


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


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

Received on Monday, 8 September 2025 14:53:15 UTC