<div id="rainbow">
  &nbsp;
</div>

#rainbow {
  height: 300px;
  margin: 0 auto;
  
  background-position-x: 0;
  background-position-y: 0;
  background-size: 200% 100%;
  
  background-position-x: 0;
  background-position-y: 0;
  
  animation-name: whoosh;
  animation-duration: 4000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  
  $first-color: #996699;
  $second-color:  #B39500;
  $third-color:  #009980;
  $fourth-color: #006699;
  $angle: 90deg;
  
  background-image: linear-gradient(
    $angle,
    // so you can see the repetition of colors easily
    $first-color,
    $second-color,
    $third-color,
    $fourth-color,
    // repeat a second time
    $first-color,
    $second-color,
    $third-color,
    $fourth-color,
    // back to the first color
    $first-color
  );
}


@keyframes whoosh {
  0% { background-position-x: 0 }
  100% { background-position-x: 100% }
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js