[csswg-drafts] [css-transitions] add support for transitioning individual properties separately (#6976)

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

== [css-transitions] add support for transitioning individual properties separately ==
With Transforms level 2 adding support for individual transform rules, it would be useful to be able to define transitions separately as well.

Good example:

Say I have a set of transitions defined at a low specificity:
```
/* General focus indication */
* {
  outline: 2px solid transparent;
  outline-offset: 0;
  transition: outline 0.25s ease, outline-offset 0.25s ease;
}

:focus {
  outline: 2px solid var(--highlight-color);
  outline-offset: 4px;
}
```

Then I have unrelated transition styles for some other components:
```
button {
  background: #333;
  color: #fff;
  transition: background 0.25s ease, color 0.25s ease;
}

button:hover {
  background: var(--bg;
  color: #fff;
}
```

The more specific transition styles wipe out my general accessibility-driven styles. In practice we find ourselves redefining the base transitions in these cases, but similar to past issues with transform rules, it gets unwieldy as the system scales.

It would be useful to be able to define transition rules alongside properties that they affect, eg.
```
* {
  outline: 2px solid transparent;
  outline-transition: 0.25s ease;
  outline-offset: 0;
  outline-offset-transition: 0.25s ease;
}
```

Or in the case of transforms:
```
button: {
  scale: 0.5;
  scale-transition: 0.5s ease;
}
```

An open question is whether or not individual-property transitions should be overridden by the current transition rules or not.

References:
https://drafts.csswg.org/css-transforms-2/
https://drafts.csswg.org/css-transitions-2/

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


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

Received on Saturday, 22 January 2022 01:06:15 UTC