1865534 - Explicitly defined <number> custom property is not animatable

Status: RESOLVED DUPLICATE of bug 1846516

(Core :: CSS Transitions and Animations, defect)

Description

[benface]

Steps to reproduce:

Consider the following CSS (or go to this CodePen: https://codepen.io/benface/pen/vYbdZWL)

@property --a {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

div {
  width: 100px;
  height: 100px;
  background-color: black;
  --a: 0.5;
  opacity: var(--a);
  transition: --a 1s;
}

div:hover {
  --a: 1;
}

Hovering the div should animate its opacity (as seen in Chrome and Safari), but it doesn't, even though Firefox 121 (Nightly) supposedly has support for @property.

Actual results:

The div's opacity changes instantly when hovered.

Expected results:

The div's opacity transitions for 1 second when hovered.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Brian Birtles (:birtles)]

This is a dupe of bug 1846516. The meta bug for @property is bug 1273706.