Loop div background-color through all rainbow colors gradually | CSS

Question

How to change the background-color of a div over time through all color of a rainbow and then set it back again to its original color and loop that process infinitely ?

The code below is the result I want but in just one div that changes its color gradually.

<div id="rainbow"></div>

.rainbow {
background-color: blue;  
  float:left;
  width: 70px;
  height:70px;
  border: 1px solid white;
 
}
.rainbow:first-child {
background-color: red;  
}
.rainbow:nth-child(2) {
background-color: orange;  
}.rainbow:nth-child(3) {
background-color: yellow;  
}.rainbow:nth-child(4) {
background-color: Chartreuse;  
}.rainbow:nth-child(5) {
background-color: cyan;  
}.rainbow:nth-child(6) {
background-color: blue;  
}.rainbow:nth-child(7) {
background-color: DarkOrchid;  
}.rainbow:nth-child(8) {
background-color: DeepPink;  
}.rainbow:nth-child(9) {
background-color: red;  
}
.rainbow:last-child {
background-color: Chartreuse;  
  float:left;
  border: 1px solid white;
  clear:both;
}

<div class="rainbow">Original color</div>
<div class="rainbow">After some time</div>
<div class="rainbow">After some time</div>
<div class="rainbow">After some time</div>
<div class="rainbow">After some time</div>
<div class="rainbow">After some time</div><div class="rainbow">After some time</div><div class="rainbow">After some time</div><div class="rainbow">Come back to red and loop</div>
<br style="clear:both">
All of the above in just one div

Answer 1

You can create css animation to change background color. To make animation loop you can add infinite and to get smooth transition of colors you can use linear

div {
  background-color: #FF0000;
  animation: bgColor 5s infinite linear;
  width: 200px;
  height: 100px;
}
@keyframes bgColor {
  12.5% {
    background-color: #FF0000;
  }
  25% {
    background-color: #FFA500;
  }
  37.5% {
    background-color: #FFFF00;
  }
  50% {
    background-color: #7FFF00;
  }
  62.5% {
    background-color: #00FFFF;
  }
  75% {
    background-color: #0000FF;
  }
  87.5% {
    background-color: #9932CC;
  }
  100% {
    background-color: #FF1493;
  }
}

<div></div>

Answer 2

You need to use keyframes to animate css

#rainbow {
background-color: blue;  
  float:left;
  width: 70px;
  height:70px;
  border: 1px solid white;
  -webkit-animation-name: example; /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
    0%   {background-color: red; }
    25%  {background-color: yellow; }
    50%  {background-color: blue; }
    75%  {background-color: green; }
    100% {background-color: red; }
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color: red; }
    25%  {background-color: yellow; }
    50%  {background-color: blue; }
    75%  {background-color: green; }
    100% {background-color: red; }
}

<div id="rainbow"></div>

Answer 3

you can achieve this with keyframes

.rainbow {
  float:left;
  width: 70px;
  height:70px;
  border: 1px solid white;
 
}

.rainbow:last-child { 
  float:left;
  border: 1px solid white;
  clear:both;
}
@keyframes color {
  0% {
    background-color: red; 
  }
  10% {
    background-color: orange; 
  }
  20% {
    background-color: yellow;  
  }
  30% {
    background-color: Chartreuse;  
  }
  40% {
    background-color: cyan; 
  }
  50% {
    background-color: blue; 
  }
  60% {
    background-color: DarkOrchid;  
  }
  70% {
    background-color: DeepPink;
  }
  80% {
    background-color: red; 
  }
  90% {
    background-color: red; 
  }
  100% {
    background-color: red;
  }
}

.rainbow {
   animation: color 8s infinite;
}

<div class="rainbow">Original color</div>
<div class="rainbow">After some time</div>
<div class="rainbow">After some time</div>
<div class="rainbow">After some time</div>
<div class="rainbow">After some time</div>
<div class="rainbow">After some time</div><div class="rainbow">After some time</div><div class="rainbow">After some time</div><div class="rainbow">Come back to red and loop</div>
<br style="clear:both">
All of the above in just one div

Answer 4

I made this in pure Javascript. (Also on github)

let r = 255
let g = 0
let b = 0

function rgb(r, g, b){
    return "rgb("+r+","+g+","+b+")"
}

function myTimer () {
    if (r < 255 && g == 0 && b == 0) {
        r++
    } else if (r == 255 && g < 255 && b == 0) {
        g++
    } else if (r > 0 && g == 255 && b == 0) {
        r--
    } else if (r == 0 && g == 255 && b < 255) {
        b++
    } else if (r == 0 && g > 0 && b == 255) {
        g--
    } else if (r < 255 && g == 0 && b == 255) {
        r++
    } else if (r == 255 && g== 0 && b > 0) {
        b--
    }
    document.body.style.backgroundColor = rgb(r, g, b)
}

setInterval(myTimer, 10)

Answer 5

How about this?

 

.text-rainbow-animation {
  font-family:arial black;
  font-size:70px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet, red); 
  -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  
  animation: rainbow-animation 35s linear infinite;
}

@keyframes rainbow-animation {
    to {
        background-position: 4500vh;
    }
}

<div class="text-rainbow-animation">How about this?
</div>