css - 关键帧 - 渐变背景没有动画

Question

我正在尝试使用@keyframes 为背景交换设置动画。背景是径向渐变。背景发生了变化，但没有动画。

#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>

我尝试了纯色，效果很好（例如背景：红色，背景：黄色......）。

我尝试了 background-image 而不是我的渐变背景，它没有帮助。

你有什么建议或知道如何动画交换，所以它不仅仅是快速交换颜色，而是从一个到另一个逐渐交换。

标签： csscss-animationskeyframeradial-gradients

Answer 1

不幸的是，背景渐变是不可动画的

幸运的是，您当前的设计不需要为渐变设置动画，因为外部颜色是恒定的。

只需使渐变透明，并在下面设置一个纯色变化的颜色

#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>