CSS variables inside CSS animation are not cascaded

UNCONFIRMED
Unassigned

Status

()

P3
normal
UNCONFIRMED
2 years ago
a year ago

People

(Reporter: xenos, Unassigned)

Tracking

47 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

2 years ago
Created attachment 8818594 [details]
Showcase css-variables.html

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0
Build ID: 20160623154057

Steps to reproduce:

Create a custom CSS property (CSS variable) inside an @keyframe rule. Apply the animation to an element.


Actual results:

The value of the custom property is well changing (if you use this value inside the @keyframe rules, it's well varying), but it is not cascaded to the element the animation is applied to nor to its child.


Expected results:

The value should be cascaded to the element and its child, since it's property (a custom one).

Currently, Opera (v41) does not consider the custom property inside the @keyframes (the border stays as if there is no animation). Chrome Canary (v57) does apply the animation but without any transition inbetween.
(Reporter)

Comment 1

2 years ago
And in code-tech words (see showcase):

This makes an animation

	@keyframes color2anim-expected {
		0% {
			--my-color2-expected: #f00;
			color: var(--my-color2-expected);
			box-shadow: 1px 1px 8px 1px var(--my-color2-expected);
			border-color: var(--my-color2-expected);
		}
		50% {
			--my-color2-expected: #ff0;
			color: var(--my-color2-expected);
			box-shadow: 1px 1px 8px 1px var(--my-color2-expected);
			border-color: var(--my-color2-expected);
		}
		100% {
			--my-color2-expected: #00f;
			color: var(--my-color2-expected);
			box-shadow: 1px 1px 8px 1px var(--my-color2-expected);
			border-color: var(--my-color2-expected);
		}
	}
	
	.text-anim-expected {
		padding: 1em;
		margin: 1em;
		border: 4px dotted black;
		animation: 5s linear 0s infinite alternate none running color2anim-expected;
	}



While this doesn't animate

	@keyframes color2anim {
		0% {
			--my-color2: #f00;
		}
		50% {
			--my-color2: #ff0;
		}
		100% {
			--my-color2: #00f;
		}
	}
			
	:root {
		/* No animation, no matter whether --my-color2 is set here */
		/*--my-color2: red;*/
		animation: 5s linear 0s infinite alternate none running color2anim;
	}
	
	.text-anim {
		color: var(--my-color2);
		box-shadow: 1px 1px 8px 1px var(--my-color2);
		border: 4px dotted black;
		border-color: var(--my-color2);
		padding: 1em;
		margin: 1em;
	}

Updated

2 years ago
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.