2

I'm trying to use CSS variables as the background-color values. I got it to work in Chrome but not in Edge browser. I'm not sure if I did something wrong or it is a bug with the Edge browser.

In this example, the square change background-color from blue to red. But in Edge it's remains white.

:root {
  --blue-color: blue;
  --red-color: red; 
}

@keyframes animatedBackground {
  0% { background-color: var(--blue-color); }
  100% { background-color: var(--red-color); }
}

#animate-area { 
  width: 100px;
  height:100px;

  animation: animatedBackground 1s linear infinite;
}
<div id="animate-area"></div>
Chuanqi Sun
  • 1,123
  • 14
  • 26

1 Answers1

1

Here is temporary work around if anyone needs it: If I use the CSS variable as the static background color, the animation will start to work. This feels totally random but it seems to solve the problem.

:root {
  --blue-color: blue;
  --red-color: red; 
}

@keyframes animatedBackground {
  0% { background-color: var(--blue-color); }
  100% { background-color: var(--red-color); }
}

#animate-area { 
  width: 100px;
  height:100px;
  background-color: var(--blue-color); /* this fixed it! */

  animation: animatedBackground 1s linear infinite;
}
<div id="animate-area"></div>
Chuanqi Sun
  • 1,123
  • 14
  • 26