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个不同的渐变叠加，则可以移动底部的渐变并根据位置的变化创建颜色的变化

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您无法为background设置动画，但添加linear-gradient的广告素材并更改其opacity。

＆＃13;

＆＃13;

.slider1 {
  opacity: .5;
  position: relative;
}

.frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  /* animation for 3 block 5 second each, 3 × 5 = 15 */
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.frame1 {
  animation-name: hide1;
  background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255));
}

.frame2 {
  animation-name: hide2;
  background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(135, 255, 0));
}

.frame3 {
  animation-name: hide3;
  background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255));
}

@keyframes hide1 {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
}

@keyframes hide2 {
  33% {
    opacity: 1;
  }
  67% {
    opacity: 0;
  }
}

@keyframes hide3 {
  67% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;