[css-transitions] add support for transitioning individual properties separately

[GrossDesignCo]

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/

[birtles]

I wonder if this might be addressable using one of the various proposals for additive CSS, #1594 being one such example.

A similar issue arises, for example, when trying to define independent utility filter classes like .sepia and .blur. CSS frameworks often end up using CSS variables to store these individual values and then some other generic .filter-like class to apply them all.

A means to say "add this to the list for this property" would address both issues I believe.

[SebastianZ]

As @birtles wrote, additive CSS addresses use cases like this one.

Besides that, I want to note that the use cases for the individual transform properties are a little different to the use case described here. And adding a *-transition counterpart for every single property would definitely be overkill.

Sebastian

[GrossDesignCo]

Oh interesting, I think additive would work for this use-case. Essentially the need is to be able to add a certain transition rule without overwriting the transition defined by another selector.