如何在边缘浏览器中将CSS变量用作关键帧动画的背景色

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

在本例中，正方形将背景颜色从蓝色更改为红色。但在边缘它仍然是白色的

：根目录{
--蓝色：蓝色；
--红色：红色；
}
@关键帧动画背景{
0%{背景色：var（--蓝色）；}
100%{背景色：var（--红色）；}
}
#设置区域{
宽度：100px；
高度：100px；
动画：动画背景1s线性无限；
}

---

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

：根目录{
--蓝色：蓝色；
--红色：红色；
}
@关键帧动画背景{
0%{背景色：var（--蓝色）；}
100%{背景色：var（--红色）；}
}
#设置区域{
宽度：100px；
高度：100px；
背景色：var（--蓝色）；/*此选项已修复*/
动画：动画背景1s线性无限；
}

---

我不确定它是否有效，但在

var（）

中，您可以指定第二个参数作为回退形式，例如：

var（--blue color，blue）

谢谢@SuperDJ。你刚刚教了我一些非常有用的东西！除了在关键帧内使用的

：root

之外，是否可以指定其他变量？