Chromium

Thanks for finding this! FYI I won't be able to prioritize working on this for a bit.

Came to the same realization in https://github.com/w3c/csswg-drafts/issues/8982#issuecomment-2317480069 which was aiming to find a method to respond to style changes.

Demo: https://codepen.io/bramus/pen/ExBpdXb

Works in Safari and Firefox (although Firefox doesn’t correctly invalidate the styles on :hover there, but that’s a separate bug form them).

Workaround for Chrome is to use the variables as the value for content, and respond to content transitioning. See this demo (which only works in Chrome): https://codepen.io/bramus/pen/ZEdjjPw

While digging into this, jakearchibald@chromium.org noticed that registering the custom property with @property makes Chrome trigger the transition on custom properties.

Looking at the Blink source, it’s because the registration bypasses this early return in css_animations.cc, making it all work.

  if (property.IsCSSCustomProperty()) {
    if (!registry || !registry->Registration(property.CustomPropertyName())) {
      return;
    }
  }

However, this workaround is currently not recommended for authors to do as it causes issues in Safari (which warrants its own bug in the WebKit’s bug tracker).