<div id="rainbow">
</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
This Pen doesn't use any external CSS resources.