CSS Question

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

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

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>