title: Loop div background-color through all rainbow colors gradually | CSS
body: <p>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 ?</p>
  
  <p>The code below is the result I want but in just one div that changes its color gradually. </p>
  
  <pre><code>&lt;div id="rainbow"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="rainbow"&gt;Original color&lt;/div&gt;
  &lt;div class="rainbow"&gt;After some time&lt;/div&gt;
  &lt;div class="rainbow"&gt;After some time&lt;/div&gt;
  &lt;div class="rainbow"&gt;After some time&lt;/div&gt;
  &lt;div class="rainbow"&gt;After some time&lt;/div&gt;
  &lt;div class="rainbow"&gt;After some time&lt;/div&gt;&lt;div class="rainbow"&gt;After some time&lt;/div&gt;&lt;div class="rainbow"&gt;After some time&lt;/div&gt;&lt;div class="rainbow"&gt;Come back to red and loop&lt;/div&gt;
  &lt;br style="clear:both"&gt;
  All of the above in just one div</code></pre>
  </div>
  </div>
  </p>