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

我已经已经检查了有关此主题的现有帖子，但这些解决方案无效。CSS3动画不适用于Firefox中的渐变背景

我有一个简单的CSS3背景动画。 Works fine ion 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。

来源

2016-02-29 Arghya C

加上'-moz-动画：危险的0.3秒无限;' – Chris

@克里斯已尝试已经，没有工作！ –

如果您将'@ keyframes'规则中的'radial-gradient（...）;的内部更改为静态颜色（'orange'或'red'），则动画将运行，看起来像是问题所在与'径向梯度' – shamsup

问题是，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);

来源

2016-02-29 08:49:50 silviagreen

看起来像这样的作品，我会适时检查，当我得到一些时间。谢谢！ –

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

回答

相关问题