Re: [csswg-drafts] [css-animations-2] Add declarative syntax for starting an animation in response to an input event (#12029)

Some suggestions based on the draft

> These suggestions are independent and can be combined with each other.

1. Support multiple gestures, similar to `background-image` stacking, using `,` as a separator.
   ```css
   animation-trigger: click(spin-trigger, once), pointerenter(spin-trigger, once);
   ```
2. Support more fine-grained declarations while removing specific CSS functions, similar to the `background` property.

   ```css
   animation-trigger-event: click;
   animation-trigger-name: spin-trigger;
   animation-trigger-iteration-count: once; /* Not recommended—using `animation-iteration-count` may already suffice */

   /* Final combined form */
   animation-trigger: click spin-trigger once;
   ```

3. Support anchoring to specific elements, not just the trigger element itself.
   ```css
   animation-trigger-element: self; /* default */
   animation-trigger-element: element(#id); /* use ID selector */
   ```
   Alternatively, follow the approach of `anchor-name`:
   ```css
   .target-element {
     anchor-name: --myAnchor;
   }
   .button {
     animation-trigger-anchor: --myAnchor;
   }
   ```


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


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

Received on Tuesday, 22 April 2025 00:15:49 UTC