[csswg-drafts] [css-transitions] Proposal: a way to restrict transitioning to specific state changes (#13224)

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

== [css-transitions] Proposal: a way to restrict transitioning to specific state changes ==
### Problem

I run into this problem surprisingly often: I have a property, let's say `color`, that changes at specific user interactions (e.g. `:hover`), in which case I want the change to be animated. So I set `transition: color 1s`. But I also want the value of `color` to be different at different breakpoints, in which case I do _not_ want the change to be animated. How can I fix that? I could set `transition: none` in the media query, but what if I want to keep being able to transition the color on interaction at every screen size, and only change the default color? I can restrict the `transition: color 1s` to the `:hover` rule, but then the color will change instantly when moving the cursor away from the element.

[Here's a CodePen](https://codepen.io/benface/pen/azNrraj) showing the issue. And just so it's 100% clear, here's a video:

https://github.com/user-attachments/assets/02ce4304-3b18-4c42-a019-bd96661665d7

**I want to keep the transitions between blue and orange and between green and red, but NOT the transition between blue and green (the one that occurs while resizing). I want it to switch instantly between blue and green.**

### Solution

A new `transition-scope` property that accepts, for each `transition-property`, an identifier that needs to match between state changes for the transition to actually occur. Then, the above CodePen would work with a single CSS addition:

```css
a {
  transition-scope: desktop;
}

@media (width < 1024px) {
  a {
    transition-scope: mobile;
  }
}
```

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


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

Received on Monday, 15 December 2025 18:52:52 UTC