1955486 - Animations on custom properties run incorrectly with variable @keyframes values

Status: UNCONFIRMED

(Core :: DOM: Animation, defect)

Description

[daimona.wiki]

Steps to reproduce:

• Define a custom property using the @property at-rule
• Set another variable (not necessarily defined via @property) to a constant value
• Define @keyframes for an animation that modifies the custom property to have a value equal to the constant variable.
• Apply that animation with a linear timing function

Or, check out https://jsfiddle.net/7h91tq6d/

Actual results:

It's a bit hard to say how things break exactly: in my example, the value of the target variable is read, but the animation goes from 0 to 10 in a single jump, so not linearly. It's not clear how the to value can affect this and where the problem really lies. Adding a constant fallback to the var() call does not help. Using a literal to value does work.

Note that the counter is only there to display the current value of the property; it is not necessary to reproduce the bug.

Expected results:

It should behave same as when the target value is specified as a literal. In my example, the property should be increased to 10 smoothly.

This also works correctly when the animated property is not custom: https://jsfiddle.net/zqoytm3s/

Comment 1

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

The severity field is not set for this bug.
:boris, could you have a look please?

For more information, please visit BugBot documentation.