[web-animations-2][css-animations-2] animation-trigger CSS syntax

In #12336, we resolved to use separate namespaces for different types of animation triggers, i.e. event-trigger-* and timeline-trigger-*. We still need to work out what properties/longhands exist within the namespaces.

The conversation continued in #12611 where the most recent suggestion uses a generic trigger() function and custom/higher-level action names that group the raw actions (option 1):

.event_source {
  event-trigger-name: --event-source;
  event-trigger-actions: --click-touch click touch --press-p keypress("p");
  /* the --event-source event trigger defined two named actions, --click-touch and --press-p. */
}
.event_target {
  animation: glow;
  animation-trigger: trigger(--event-source, --click-touch play-pause, --press-p play, keypress("r") reset);
  /* can refer to multiple trigger actions, either by "action name" or directly */
}

.timeline_source {
  timeline-trigger: --view-trigger view() contain;
}
.timeline_target {
  animation-trigger: trigger(--view-trigger, enter play-forwards, exit play-backwards);
}

A few alternatives we can consider are:

• option 2: Instead of a generic trigger() function, have animation-trigger use event() and timeline() functions which have different "signatures."

<single-animation-trigger>: event(<dashed ident>, <behavior>) | timeline(<dashed ident>, <entry behavior>, <exit behavior>);
animation-trigger: [ [ <single-animation-trigger>]+ ]#

For example:

.event_source { 
  event-trigger: --click-touch-trigger click touch, --dblclick-trigger dblclick;
}
.event_target {
  animation-trigger: event(--click-touch-trigger, play) event(--dblclick-trigger, pause);
}
.timeline_source {
  timeline-trigger: --timeline-trigger view contain;
}
.timeline_target {
  animation-trigger: timeline(--timeline-trigger, play-forwards, play-backwards);
}

option 3: Put the actions/behavior configurations within the event-trigger-* and timeline-trigger-* namespaces. This is the second alternative in flackr's suggestion from #12336.

Proposed Solution: Keep the generic trigger() function along with custom/higher-level action names (option 1).
Three important properties of option 1 are that:

• (a) it preserves the fact that timeline-trigger's "exit" and "enter" are paired,
• (b) it's flexible in that it allows actions to be specified on either the source or the target, and
• (c) by keeping behaviors in animation-trigger, event-trigger and timeline-trigger are conceptually reusable in a non-animation contexts.

Option 2 lacks the flexibility of (b). Option 3 lacks the flexibility (b) and the reusability of (c) (sort of).

@flackr @ydaniv @fantasai @szager-chromium @tabatkins , ptal, thanks.

Start with the CSS Animations 2 animation-triggers section and read the discussions in issues #12336 and #12611, especially the latest suggestion linked there. The work is done when the animation-trigger syntax and the event-trigger-* and timeline-trigger-* properties are resolved and reflected in the relevant specification text.