Question

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

我有一个简单的CSS3背景动画。工作正常Chrome＆amp; 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 。

Answer 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);

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

1 个答案: