Re: [csswg-drafts] Add "show interest" and "lose interest" hover delays to CSS (#9236)

> ([#](https://github.com/w3c/csswg-drafts/issues/9236#issuecomment-2825651879)) Another open question is the default value. In the explainer I propose a default value of `0.5s` for reasons, but I could also see a natural default value of `0s`.

I found `0.5s` to be long while building https://codepen.io/bramus/pen/raNLLor. It felt like it was lagging – especially when tabbing around – so I shortened the duration by **a lot**.

`0.5s` is really slow, as backed by [research from the Nielsen Norman Group on animations](https://www.nngroup.com/articles/animation-duration/) 

> Simple feedback animations, such as showing a checkbox or toggle switch, should be roughly 100 ms (0.10 seconds) in total duration.  This duration [feels immediate to user](https://www.nngroup.com/articles/response-times-3-important-limits/)s and creates the illusion of physically manipulating the object. 100 ms is at the lower end of perceivable motion, where it almost feels like an instantaneous jump from one place to another, but is enough to make the feedback noticeable.
>  
> When animation involves substantial screen changes, such as when a modal window moves into view, a duration of 200–300 ms can be appropriate. The further an element has to move, the more important it is that it does so smoothly and non-jarringly (especially for people that are sensitive to motion, such as users with epilepsy or vestibular disorders).

The research is aimed on animations, but it also applies to the delays here.

Whatever default value we land on, ideally the `interest-target-hide-delay` should be shorter than the `interest-target-show-delay`. As per [Material Design Motion Guidelines](https://m2.material.io/design/motion/speed.html#duration):

> Transitions that close, dismiss, or collapse an element use shorter durations. Exit transitions may be faster because they require less attention than the user’s next task.

This also resonates with what NN/g says, and aligns with what, for example, Wikipedia does: they use different delays for showing and hiding a hovercard.

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


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

Received on Thursday, 24 April 2025 10:28:43 UTC