css gradient animation coming as a static slide show

Question

.homepage{
  width:200px;
  height:200px;
  animation: wave 5s linear infinite forwards;
}

@keyframes wave{
    0% {
    background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51),#000);
    }
    25%{
    background: linear-gradient(to bottom right,#000, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51));
    }
    50%{
    background: linear-gradient(to bottom right,rgb(51, 51, 51) ,#000, rgb(0, 0, 0), rgb(25, 24, 27));
    }
    75%{
    background: linear-gradient(to bottom right, rgb(25, 24, 27),rgb(51, 51, 51) ,#000, rgb(0, 0, 0));
    }
    100%{
     background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51),#000);
    }

<div class="homepage">
</div>

I tried to set background color (linear gradient) animation as some type of waves, but I am getting it as a slide show.

it will be helpful to me if I can get it as a wave pattern

Answer 1

I achieve this by making the gradient a repeating gradient, but only using 1 quarter of the full gradient (0% through 25%) That is done by the calc() code

I need thirds for the second term, because you have 3 color stops (last one is equal to first one).

Then I scale the background by 4 (opposite of 1 quarter from above).

I can then animate the background-position

.homepage {
  width:200px;
  height:200px;
  
  animation: wave 5s linear infinite forwards;
  background-image: repeating-linear-gradient(
    45deg, 
    rgb(0, 0, 100)   calc(100% / 4  * 0 / 3), 
    rgb(125, 24, 27) calc(100% / 4  * 1 / 3),
    rgb(51, 151, 51) calc(100% / 4  * 2 / 3),
    rgb(0, 0, 100)   calc(100% / 4  * 3 / 3)
  );
  background-size: 400% 400%;
}

@keyframes wave {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 100%;
  }
}

<div class="homepage">
</div>

The direction of the animation is either left diagonal or right diagonal;

.container {
  line-height: 0px;
}
.homepage1,
.homepage2,
.homepage3,
.homepage4 {
  width:200px;
  height:200px;
  display: inline-block;
  background-size: 400% 400%;
  animation: 5s linear infinite forwards
}

.homepage1 {
  animation-name: wave1;
  background-image: repeating-linear-gradient(
    45deg, 
    rgb(0, 0, 100)   calc(100% / 4  * 0 / 3), 
    rgb(125, 24, 27) calc(100% / 4  * 1 / 3),
    rgb(51, 151, 51) calc(100% / 4  * 2 / 3),
    rgb(0, 0, 100)   calc(100% / 4  * 3 / 3)
  );
}

.homepage2 {
  animation-name: wave2;
  animation-direction: reverse;
  background-image: repeating-linear-gradient(
    -45deg, 
    rgb(0, 0, 100)   calc(100% / 4  * 0 / 3), 
    rgb(125, 24, 27) calc(100% / 4  * 1 / 3),
    rgb(51, 151, 51) calc(100% / 4  * 2 / 3),
    rgb(0, 0, 100)   calc(100% / 4  * 3 / 3)
  );
}

.homepage3 {
  animation-name: wave2;
  animation-direction: normal;
  background-image: repeating-linear-gradient(
    135deg, 
    rgb(0, 0, 100)   calc(100% / 4  * 0 / 3), 
    rgb(125, 24, 27) calc(100% / 4  * 1 / 3),
    rgb(51, 151, 51) calc(100% / 4  * 2 / 3),
    rgb(0, 0, 100)   calc(100% / 4  * 3 / 3)
  );
}

.homepage4 {
  animation-name: wave1;
  animation-direction: reverse;
  background-image: repeating-linear-gradient(
    -135deg, 
    rgb(0, 0, 100)   calc(100% / 4  * 0 / 3), 
    rgb(125, 24, 27) calc(100% / 4  * 1 / 3),
    rgb(51, 151, 51) calc(100% / 4  * 2 / 3),
    rgb(0, 0, 100)   calc(100% / 4  * 3 / 3)
  );
}

@keyframes wave1 {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 100%;
  }
}

@keyframes wave2 {
  from {
    background-position: 100% 100%;
  }
  to {
    background-position: 0 0;
  }
}

<div class="container">
  <div class="homepage1"></div><div class="homepage2"></div><br>
  <div class="homepage3"></div><div class="homepage4"></div>
</div>

or

html, body {
  height: 100%;
  padding: 0;
}
body {
display: flex;
}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}
.homepage1,
.homepage2,
.homepage3,
.homepage4 {
  flex: 1 1 calc(100% / 8);
  display: inline-block;
  background-size: 400% 400%;
  animation: 5s linear infinite forwards
}

:root {
  --rainbow:     
    red     calc(100% / 4  * 0 / 6), 
    orange  calc(100% / 4  * 1 / 6),
    yellow  calc(100% / 4  * 2 / 6),
    green   calc(100% / 4  * 3 / 6),
    blue    calc(100% / 4  * 4 / 6),
    purple  calc(100% / 4  * 5 / 6),
    red     calc(100% / 4  * 6 / 6);
  --bw: 
    rgba(000, 000, 000, 0.5)  calc(100% / 16 * 0 / 8),
    rgba(020, 020, 020, 0.5)  calc(100% / 16 * 1 / 8),
    rgba(127, 127, 127, 0.5)  calc(100% / 16 * 2 / 8),
    rgba(235, 235, 235, 0.5)  calc(100% / 16 * 3 / 8),
    rgba(255, 255, 255, 0.5)  calc(100% / 16 * 4 / 8),
    rgba(235, 235, 235, 0.5)  calc(100% / 16 * 5 / 8),
    rgba(127, 127, 127, 0.5)  calc(100% / 16 * 6 / 8),
    rgba(020, 020, 020, 0.5)  calc(100% / 16 * 7 / 8),
    rgba(000, 000, 000, 0.5)  calc(100% / 16 * 8 / 8);
}

.homepage1 {
  animation-name: wave2;
  background-image: 
    repeating-linear-gradient(
      45deg, 
      var(--bw)
    ),
    repeating-linear-gradient(
      -45deg, 
      var(--rainbow)
    );
}

.homepage2 {
  animation-name: wave1;
  animation-direction: reverse;
  background-image: 
    repeating-linear-gradient(
      -45deg, 
      var(--bw)
    ),
    repeating-linear-gradient(
      45deg, 
      var(--rainbow)
    );
}

.homepage3 {
  animation-name: wave1;
  animation-direction: normal;
  background-image: 
    repeating-linear-gradient(
      -45deg, 
      var(--bw)
    ),
    repeating-linear-gradient(
      -135deg, 
      var(--rainbow)
    );
}

.homepage4 {
  animation-name: wave2;
  animation-direction: reverse;
  background-image: 
    repeating-linear-gradient(
      45deg, 
      var(--bw)
    ),
    repeating-linear-gradient(
      135deg, 
      var(--rainbow)
    );
}

@keyframes wave1 {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 100%;
  }
}

@keyframes wave2 {
  from {
    background-position: 100% 100%;
  }
  to {
    background-position: 0 0;
  }
}


body {
margin: 0;
padding: 0;
display: flex;
}

<div class="container">
  <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
  <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
  <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
  <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
  <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
  <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
  <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
  <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
</div>