Keyframes - gradient background is not animated

Question

I am trying to animate background exchange using @keyframes. Background is radial gradient. Backgroud changes but it isn't animated.

#mydiv {
background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);
width: 100%;
height: 1246px;
position: relative;
overflow: hidden;
animation: background-gradient 5s;
animation-iteration-count: infinite;
backface-visibility: hidden;
animation-timing-function: ease-in-out;
}

@-webkit-keyframes background-gradient {
0% {background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);}
25% {background: radial-gradient(circle at 90% 80%, #993399, #4d0019);}
50% {background: radial-gradient(circle at 90% 80%, #3333cc, #4d0019);}
75% {background: radial-gradient(circle at 90% 80%, #00ffcc, #4d0019);}
100% {background: radial-gradient(circle at 90% 80%, #cc9900, #4d0019);}
}

@keyframes background-gradient {
0% {background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);}
25% {background: radial-gradient(circle at 90% 80%, #993399, #4d0019);}
50% {background: radial-gradient(circle at 90% 80%, #3333cc, #4d0019);}
75% {background: radial-gradient(circle at 90% 80%, #00ffcc, #4d0019);}
100% {background: radial-gradient(circle at 90% 80%, #cc9900, #4d0019);}
}

<div id="mydiv"></div>

I tried with just solid colors and it works fine (e.g. background: red, background: yellow...).

I tried background-image instead of just background on my gradients, it doesn't help.

Do you have any advice or know solution how to animate exhange, so it is not just rapid exhange of colors but gradual exchange from one to another.

Answer 1

Unfortunately, background gradients are not animatable

Luckily for you, your current desing doesn't need to animate the gradient, since the external color is constant.

Just make the gradient transparent, and set a solid changing color underneath

#mydiv {
  width: 100%;
  height: 600px;
  position: relative;
  overflow: hidden;
  animation: background-gradient 5s;
  animation-iteration-count: infinite;
  backface-visibility: hidden;
  animation-timing-function: ease-in-out;
  background-image: radial-gradient(circle at 90% 80%, transparent, #4d0019);
}

@keyframes background-gradient {
  0% {
    background-color: #ff0000;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: #3333cc;
  }
  75% {
    background-color: #00ffcc;
  }
  100% {
    background-color: #cc9900;
  }
}

<div id="mydiv"></div>