Bug 169402 – transition-duration doesn't work when using CSS variables

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Animations

As the title say, using a CSS variable for transition-duration doesn't work. However, if you use -webkit-transition-duration, it'll work fine.

Here's a sample CSS:

:root {
  --accent-color: green;
  --duration: 500ms;
}

.button {
  transition-duration: var(--duration);
  transition-property: color;

  // Adding -webkit-transition-duration works
  // -webkit-transition-duration: var(--duration);
}

.button:active {
  color: var(--accent-color);
}

[Radar WebKit Bug Importer]

<rdar://problem/30994786>

[Antoine Quint]

Created attachment 466307 [details]
Test

Adding a test showing this now works as expected.