W3C home > Mailing lists > Public > public-houdini@w3.org > August 2015

[css-properties-values-api] Transitions and custom properties

From: Shane Stephens <shans@google.com>
Date: Wed, 26 Aug 2015 16:04:59 +0000
Message-ID: <CAGTfzwTYMUz5+WDFNfZQVvT2JzFba17WAOqvuDRAM2WdVkcQhQ@mail.gmail.com>
To: "public-houdini@w3.org" <public-houdini@w3.org>
Tab Atkins, Matt Rakow, and I worked through some use cases for mixing
transitions and custom properties together, with an aim to identify the
order in which transitions and the apply hook should be invoked.

tl;dr: transitions should operate *before* the apply hook.

Here are the use cases we looked at:

(1) I want to transition my number-like custom property directly.
(e.g. I have a --lighten property that modifies the output background-color
by a percentage. I want to transition the amount by which things are

.foo {
  --lighten: 5%;
  background-color: red;
  transition: --lighten 1s;

.foo:hover {
  --lighten: 25%;

If the transition runs first, then this just works: the transition creates
intermediate values for --lighten, which are subsequently used to modify
the background-color in apply().

If the transition runs after apply, though, then --lighten isn't updated
until after it's written the background-color and we don't see a
transition. Indeed, we'd have to transition background-color to see an
effect, and that's *weird*.

(2) I want to transition my property but have the effect of a custom
property still apply:

.foo {
  --lighten: 5%;
  background-color: red;
  transition: background-color 1s;

.foo:hover {
  background-color: green;

If the transition runs first, then background-color gets updated before
apply hooks are run. Because --lighten has registered background-color as
an input, it gets invoked and fixes up the background-color as required.

If the apply hook runs first, then it will apply to the background-color
which will then be transitioned. This works fine, but only as long as the
apply hook is a linear transformation.

(Actually, there might be a use case for explicitly wanting a linear
transition between the output of a non-linear transformation, rather than
transitioning in the linear space and applying the non-linearity at each
point. I'd like to hear from anyone who can think of one).

(3) I want to invent transition behavior between two names (effectively, I
want to generate custom aliases):

.foo {
  --color: chartrurple;
  transition: --color 1s;

.foo:hover {
  --color: beiglemousse;

If the transition runs first, this won't work. There's no way to transition
between these names directly.

If the apply hook runs first, this won't work. It's not --color that would
need to transition, but whatever property this actually applies to. As
mentioned above, that would be weird.

Fortunately, we know that we want to introduce a custom computation phase
in a future level of the specification, and that would be an *excellent*
way to implement aliases.

(4) I want my custom property to generate transitioning behavior without
explicit requests from the author - e.g. this would transition over a
period of time *in the absence of any transition: value being set*:

.foo {
  --lighten: 5%;

.foo:hover {
  --lighten: 25%;

Please don't do that :) It's effectively a form of working against author


Any other use cases or suggestions welcome, but at the moment it's looking
like transition followed by apply is the right way to go.

Received on Wednesday, 26 August 2015 16:05:38 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 26 August 2015 16:05:39 UTC