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

您无法为 background 设置动画，但您可以使用 linear-gradient 添加块并更改它们的 opacity。

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

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

Answer 2

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

如果您将这个渐变构建为 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>

CSS 循环渐变过渡

CSS looping gradient Transition

html

css

css-animations

css-gradients