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

@ydaniv – Yes, I definitely have real-life use cases for this. I thought the example I gave in the OP was "real-life" enough (changing the value of a property based on the screen size with no transition despite wanting to transition that same property on interaction), but here are some more:

- Transitioning the opacity or background color of a button on hover, but not when the button flips between enabled and disabled.
- More niche but something I ran into recently: conditionally transitioning a property based on the presence of a class, but NOT between the value that the property was right before the class was added and the current value of the property. Here's some example code for that:

```css
.my-component {
  background-color: transparent;
}

.my-component.with-background {
  transition: background-color 1s;
  background-color: red;
  &:hover {
    background-color: blue;
  }
}
```

How would you prevent `<div class="my-component">`'s background from transitioning between `transparent` and `red` when adding the `with-background` class? With this proposal, I would prevent it by adding e.g. `transition-scope: with-background` to the `.my-component.with-background` rule. It could also be `transition-scope: --with-background` if that's better, but yes, those identifiers would be custom idents that don't need to be defined outside of `transition-scope` declarations. The idea is that when CSS is about to transition a property because its value changed, it would also check if the value of `transition-scope` is the same as it was when the property to transition had its previous value, and if not, it would not run the transition. In the example above with `transition-scope: with-background` added to the second rule as mentioned, adding the `with-background` class would change the value of `background-color` from `transparent` to `red` which would normally trigger a transition, but because `transition-scope` also changed between its initial value (could be `auto`?) and `with-background`, no transition would be triggered. However, when hovering the `my-component` element, there _would_ be a transition between `red` and `blue` (and back to `red` when moving the cursor away), because `transition-scope` remains constant.

Does it make more sense?

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


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

Received on Thursday, 8 January 2026 04:55:13 UTC