[csswg-drafts] [css-animations] or [css-selectors] Abiliity to invoke an animation on the "exit" of a state selector (#9062)

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

== [css-animations] or [css-selectors] Abiliity to invoke an animation on the "exit" of a state selector ==
The [Open-UI WG proposal on `popover=hint`](https://open-ui.org/components/popover-hint.research.explainer/) includes two new CSS properties: `popover-show-delay` and `popover-hide-delay`. These are designed to allow a debouncing delay for showing and hiding a tooltip-style popover.

In the discussion, [I claimed that `popover-show-delay` is replicable doay using `animation-delay`](https://github.com/openui/open-ui/pull/766/files/2232ac991582913f820d1a50709963a3d1f55c9c#r1223980453). I have [an example codepen](https://codepen.io/keithamus/pen/yLQabJK) which demonstrates the effect by using `:hover` and `:focus-within` to set an animation, with an `animation-delay`. This, as I understand it, negates the need for a `popover-show-delay`, however I can't find a way within CSS to trigger an animation when a CSS state is "exited".

Transitions might be the answer, but I can't figure out how to make the same effect with transitions. If someone can I'm happy to close this issue out!

If it's not possible with transitions, perhaps one way to resolve this is to add properties which allow defining an animation for when an element leaves a state. This might look like adding `exit-animation-*` for each `animation-*` property. 

Another proposal would be to add stateful selectors such as `:hover-out`, `:focus-leave`, `:focus-within-leave`. These could apply to elements that were recently in their respective states, but have "recently" left. I suppose the mechanics for this would need to reason about how long these states apply for, based on the duration of any animation properties applied to them?

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


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

Received on Thursday, 13 July 2023 11:06:16 UTC