如何在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>