CSS 循环渐变过渡

Question

我有一个问题，我想创建一个 CSS 循环渐变动画，但是当我这样做时，动画是非常静态的，它不能流畅地动画 下面是我目前正在处理的示例。希望你能帮助我。

.slider1 {
  background: background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255)) !important;
}

/* css animation not smooth */
.slider1 {
  opacity: .5;
  animation: myfirst 5s;
  -moz-animation: myfirst 5s infinite; /* Firefox */
  -webkit-animation: myfirst 5s infinite; /* Safari and Chrome */
}

@-moz-keyframes myfirst { /* Firefox */ 
  0% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(0, 174, 255))
  }
  50% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(135, 255, 0))
  }
  100% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255))
  }
}

@-webkit-keyframes myfirst { /* Safari and Chrome */
  0% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(0, 174, 255))
  }
  50% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(135, 255, 0))
  }
  100% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255))
  }
}

<div class="slider1">
  This some content
  <div class="wsite-spacer" style="height:600px;"></div>
</div>

Answer 1

基本上你的渐变在顶部有一个固定的颜色，在底部有一个不同的颜色。

如果您将此渐变构建为 2 个不同的渐变叠加，那么您可以移动底部的渐变并根据位置的变化创建颜色变化

div {
    width: 400px;
    height: 300px;
    background-image: 
linear-gradient(to top, transparent, red),    
linear-gradient(to right, green, yellow, blue);
    background-size: 100% 100%, 2000% 100%;
    animation: move 5s infinite;
}

@keyframes move {
 from {background-position: center center, left center;}
 to {background-position: center center, right center;}
}

<div></div>