CODEWITHSUNDEEP
htmlcssfirefoxcss-animations
Arghya C
Arghya C

Reputation: 10078

CSS3 animation not working with gradient background in Firefox

I've already checked existing posts on this topic, but those solutions didn't work.

I have a simple CSS3 background animation. Works fine ion Chrome & IE, but does not work in Firefox. I'm currently using Firefox developer edition v46.0a2 (2016-02-28). Here is the style.

@-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;
}

Please check this JSFiddle demo.

Upvotes: 2

Views: 577

Answers (1)

silviagreen
silviagreen

Reputation: 1729

The problem is that firefox is not supporting radial-gradients with that particolar use; if you try the following code

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

The animation works in FF. Also the following definitions of radial-gradient works:

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

Upvotes: 2

Related Questions