CSS: repeated animated background

Question

I'm trying to create a repeated background existing out of two parts. Each part is a gradient and while the one moves up, the other moves down.

The best I got is this:

html {
  background: black;
  color: #4c4c4c;
}

body {
  margin: 30vh auto;
  max-width: 80vw;
}

.wave {
  background: none;
  height: 1rem;
  width: 50%;
  position: absolute;
  z-index: 2;
  animation: move 700ms 0ms steps(2) infinite both;
}

.color::after,
.color::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  top: 0;
}

.color {
  background-image: linear-gradient(#fe0000 50%, #6531ff 0 100%);
}

.color::after {
  background: linear-gradient(to bottom, #f4e04d, #3bceac 20%, rgba(22, 22, 22, 0) 100%), linear-gradient(to right, #042a2b 3rem, transparent 3rem, transparent 6rem);
}

.wave,
.color::after,
.color::before {
  background-size: 5rem 1rem;
  background-repeat: repeat-x;
}

@keyframes move {
  0% {
    margin-top: -3rem;
  }
  100% {
    margin-top: -3.25rem;
  }
}

<div class="color wave"></div>

I get why this doesn't work, but not sure how to proceed.

Since it is difficult to describe, here is an image of what I'm looking for:

At first (position 1), all odd blocks are higher than the even blocks. After the first animation, it's the other way around (position 2) and so on.

Answer 1

Maybe like below:

.box {
  height:100px;
  background:linear-gradient(red,blue,yellow,red) 0 0/100% 200%;
  animation:y 2s linear infinite;
}
.box::after {
  content:"";
  display:block;
  height:100%;
  background:linear-gradient(green,lightblue,pink,green) 0 0/100% 200%;
  animation:inherit;
  animation-direction: reverse;
  -webkit-mask:linear-gradient(90deg,#fff 50%,transparent 0) 0 0/20% 100%;
}

@keyframes y {
  to {
    background-position:0 -200%;
  }
}

<div class="box"></div>