title: Adding a day/night cycle for scrolling clouds with smooth color transitions
body: <p>I have got the scrolling clouds but I need a dawn/dusk and day/night cycle by detecting the system clock. I'm not sure how to detect system time with html or css.</p>
  
  <p>I tried transitions with a delay but its not working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
  }
  body {
    overflow: hidden;
  }
  #clouds {
    padding: 100px 0;
    background: #c9dbe9;
    background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
    background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
    background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
  }
  .cloud {
    width: 200px;
    height: 60px;
    background-color: #fff;
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    position: relative;
  }
  .cloud:before,
  .cloud:after {
    content: '';
    position: absolute;
    background: #fff;
    width: 100px;
    height: 80px;
    position: absolute;
    top: -15px;
    left: 10px;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    -moz-transform: rotate(30deg);
  }
  .cloud:after {
    width: 120px;
    height: 120px;
    top: -55px;
    left: auto;
    right: 15px;
  }
  .x1 {
    left: -250px;
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
    -webkit-animation: moveclouds 120s linear infinite;
    -moz-animation: moveclouds 120s linear infinite;
    -o-animation: moveclouds 120s linear infinite;
  }
  .x2 {
    right: 70px;
    top: -100px;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0.7;
    -webkit-animation: moveclouds 140s linear infinite;
    -moz-animation: moveclouds 140s linear infinite;
    -o-animation: moveclouds 140s linear infinite;
  }
  .x3 {
    left: -550px;
    top: -200px;
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
    opacity: 0.8;
    -webkit-animation: moveclouds 150s linear infinite;
    -moz-animation: moveclouds 150s linear infinite;
    -o-animation: moveclouds 150s linear infinite;
  }
  .x4 {
    left: 400px;
    top: -250px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.75;
    -webkit-animation: moveclouds 100s linear infinite;
    -moz-animation: moveclouds 100s linear infinite;
    -o-animation: moveclouds 100s linear infinite;
  }
  .x5 {
    left: -750px;
    top: -250px;
    -webkit-transform: scale(0.47);
    -moz-transform: scale(0.47);
    transform: scale(0.47);
    opacity: 0.8;
    -webkit-animation: moveclouds 110s linear infinite;
    -moz-animation: moveclouds 110s linear infinite;
    -o-animation: moveclouds 110s linear infinite;
  }
  @-webkit-keyframes moveclouds {
    0% {
      margin-left: 1000px;
    }
    100% {
      margin-left: -1000px;
    }
  }
  @-moz-keyframes moveclouds {
    0% {
      margin-left: 1000px;
    }
    100% {
      margin-left: -1000px;
    }
  }
  @-o-keyframes moveclouds {
    0% {
      margin-left: 1000px;
    }
    100% {
      margin-left: -1000px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="clouds"&gt;
    &lt;div class="cloud x1"&gt;&lt;/div&gt;
    &lt;div class="cloud x2"&gt;&lt;/div&gt;
    &lt;div class="cloud x3"&gt;&lt;/div&gt;
    &lt;div class="cloud x4"&gt;&lt;/div&gt;
    &lt;div class="cloud x5"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I'm trying to achieve:</p>
  
  <p>At 5.30PM (as on local system): transition from #c9dbe9 to #E0DE3F</p>
  
  <p>At 6.30PM : transition from #E0DE3F to #323232</p>
  
  <p>At 5.30AM : transition from #323232 to #E0DE3F</p>
  
  <p>At 7.00AM : transition from #E0DE3F to #c9dbe9</p>
  
  <p>Please check out the demo above, a similar demo would be greatly appreciated, a single transition detecting the system time would be enough, I'll take care of the rest.</p>
  
  <p>Also, is it possible to loop the cloud animation again before all the clouds have floated past the screen? There's a gap where the animation waits till all the clouds have floated past the screen, before starting up again.</p>