[csswg-drafts] [animation-triggers-1] Multiple named triggers (#13710)

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

== [animation-triggers-1] Multiple named triggers ==
With most named css specs, it is necessary that when you refer to a particular name it has one meaning. E.g.
1. With animation-timeline, you must have a single source for what is the current time and what are the ranges of that timeline.
2. With anchor positioning, you must have a single reference box per referenced anchor name that you are positioning relative to.

However, this is not necessary with animation-triggers. With animation-triggers, we could allow multiple sources to control the same named trigger, e.g. The following example would make clicking either button able to activate or deactivate the `--c` trigger.

```
.button-1 {
  event-trigger: --c click / click;
}

.button-2 {
  event-trigger: --c click / click;
}

.target {
  animation: slide 1s both;
  animation-trigger: --c play-forwards play-backwards;
}
```

This seems like a nice feature to be able to use, and I could imagine similar cases for timeline triggers. Should we allow this?

There is one area where this may be confusing, per #13364 we resolved that each named property acts as its own scope, allowing nesting to "just work" without explicitly creating trigger-scopes:

```html
<style>
.item {
  timeline-trigger: --item view();
}
.animation-target {
  animation-name: parallax;
  animation-trigger: --item play-once;
}
</style>
<div class=item>
  <div class=animation-target></div>
</div>
<div class=item>
  <div class=animation-target></div>
</div>
<div class=item>
  <div class=animation-target></div>
</div>
```

However, if animation-trigger names no longer conflict, I think the expected behavior here is that without adding a trigger-scope, activating any of the --item triggers plays all of the animations. This means that for triggers it would be necessary to add `trigger-scope` for these cases where for the other named properties it is not.

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


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

Received on Tuesday, 24 March 2026 13:08:48 UTC