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

【问题标题】：CSS3 animation not working with gradient background in FirefoxCSS3 动画不适用于 Firefox 中的渐变背景
【发布时间】：2016-06-12 04:38:12
【问题描述】：

我已经查看过有关该主题的现有帖子，但这些解决方案不起作用。

我有一个简单的CSS3 背景动画。在 Chrome 和 IE 中工作正常，但在 Firefox 中不起作用。我目前正在使用Firefox developer edition 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;
}

请查看此JSFiddle demo。

【问题讨论】：

添加-moz-animation: danger 0.3s infinite;
@Chris 已经试过了，没用！
如果您将 @keyframes 规则中的 radial-gradient(...);s 更改为静态颜色（orange 或 red），那么动画将运行，看起来问题出在radial-gradients
好的，看来问题在于您的径向渐变在 Firefox 的关键帧中不起作用。谷歌搜索表明这是一个已知问题。

标签： html css firefox css-animations

【解决方案1】：

问题在于 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);

【讨论】：

看起来这行得通，有时间我会好好检查一下。谢谢！