Html CSS3动画不适用于Firefox中的渐变背景

我已经检查了关于这个主题的现有帖子，但是这些解决方案都不起作用

我有一个简单的

CSS3

背景动画。在Chrome&

IE

上运行良好，但在Firefox中不起作用。我目前使用的是Firefox开发者版v46.0a2（2016-02-28）。这是款式

@-webkit-keyframes danger {
    0%   {background-color: orange;}
    50%  {background-color: red;}
    100% {background-color: orange;}
}
@keyframes danger {
    0%  {background: radial-gradient(circle, #ff1a1a, #ff5050, #ff5500);}
    50%  {background: radial-gradient(circle, #b30000, #ff0000, #ff471a);}
    100%  {background: radial-gradient(circle, #ff1a1a, #ff5050, #ff5500);}
}
.blink {
    width: 200px;
    height: 200px;
    background-color: #ff1a1a; /*rgba(256, 0, 0, 1.0); /*#de6363;*/
    -webkit-animation: danger 0.3s infinite;
    animation: danger 0.3s infinite;
}

---

请检查此

问题在于firefox不支持使用该分词的径向渐变；如果您尝试以下代码

@keyframes danger {
  0%   {background-color: orange;}
  50%  {background-color: red;}
  100% {background-color: orange;}
}

动画在FF中工作。此外，径向梯度的定义如下：

background: radial-gradient(#7B7878 1%, #BBBBBB 30%, #CCCCCC 40%, #FFF 70%);
background: radial-gradient(circle, #D52B48, #413636);

---

添加

-moz动画：危险0.3s无限@Chris已经试过了，没用！如果更改
径向梯度（…）@关键帧
内的code>s规则设置为静态颜色（
橙色
或
红色
），然后动画将运行，使其看起来问题在于
径向渐变
好的，问题似乎在于firefox中的径向渐变在关键帧中不起作用。谷歌搜索表明这是一个已知的问题。看起来这是可行的，我会在有时间的时候仔细检查。谢谢