css - 如何在 Edge 浏览器中使用 CSS 变量作为关键帧动画的背景色

Question

我正在尝试使用 CSS 变量作为背景颜色值。我让它在 Chrome 中工作，但不能在 Edge 浏览器中工作。我不确定是我做错了什么还是 Edge 浏览器的错误。

在本例中，方块将背景颜色从蓝色变为红色。但在 Edge 中，它仍然是白色的。

: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>

Answer 1

如果有人需要，这里是临时解决方法：如果我使用 CSS 变量作为静态背景颜色，动画将开始工作。这感觉完全随机，但似乎解决了问题。

: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>