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

Thanks for proposing, this is indeed much needed!
I understand this is still just a rough sketch of the API, so opening some questions for discussion:

1. Currently `animation-trigger` works with timeilnes using the `animation-trigger-timeline` property. And the Trigger is modeled around the concept of a timeline, either time-based (`auto`) or scroll/view with ranges. In this proposal there is no timeline, or rather, there's yet another inner-trigger that triggers an `auto` timeline? So we need to understand how this sits together with the timeline part.
2. With timelines, you either specify a timeline using the `*-timeline` property on the source element, and then reused that via `-name` in the trigger, or specify the timeline using an anonymous function in the trigger property, same like animations. In this proposal the source element is defined using `animation-trigger-name` which just defines this element for a trigger but does not says what for. And then on the target element it's wrapped in a `click()` function that specifies the usage.  Shouldn't we have a property on the source element that defines it as a click source, and then it can be used inside triggers? (getting somewhat a deja vu from CSS Toggles here)
3. I assume we want this feature to also play nicely with different types, i.e. `repeat`, `alternate`, `state`. These behaviors, together with click/hover handlers, are many times used with transitions. While it would be nice to have that working with animations, I wonder if we're not missing a chance to have both, but then this requires toggling a selector, which goes back to CSS Toggles again. But maybe if we could define a `click` source with a property, like mentioned in question (1), and then this could perhaps affect something like a native form of `:state()` selector then this could work out?

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


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

Received on Tuesday, 1 April 2025 11:13:36 UTC