<div class="sky">
<div class="moon"></div>
  <div class="clouds_one"></div>
<div class="clouds_two"></div>
<div class="clouds_three"></div>
  </div>

<style type="text/css">
html,body {
  margin:0;
  height:100%
  ; }
   
  .sky {
  height:100%;
  background: no-repeat #007fd5;
  position:relative;
  overflow:hidden;
  -webkit-animation:sky_background 50s ease-out infinite;
  -moz-animation:sky_background 50s ease-out infinite;
  -o-animation:sky_background 50s ease-out infinite;
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  -o-transform:translate3d(0,0,0)
  ; }
   
   
  .moon {
  background: no-repeat url("moon.png");
  position:absolute;
  left:0;
  height:100%;
  width:300%;
  -webkit-animation:moon 50s linear infinite;
  -moz-animation:moon 50s linear infinite;
  -o-animation:moon 50s linear infinite;
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  -o-transform:translate3d(0,0,0)
  ; }
   
   
  .clouds_one {
  background: no-repeat url("cloud_one.png");
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:300%;
  -webkit-animation:cloud_one 50s linear infinite;
  -moz-animation:cloud_one 50s linear infinite;
  -o-animation:cloud_one 50s linear infinite;
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  -o-transform:translate3d(0,0,0)
  ; }
  /* yraaa.ru */
  .clouds_two {
  background: no-repeat url("cloud_two.png");
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:300%;
  -webkit-animation:cloud_two 75s linear infinite;
  -moz-animation:cloud_two 75s linear infinite;
  -o-animation:cloud_two 75s linear infinite;
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  -o-transform:translate3d(0,0,0)
  ; }
  /* yraaa.ru */
  .clouds_three {
  background: no-repeat url("cloud_three.png");
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:300%;
  -webkit-animation:cloud_three 100s linear infinite;
  -moz-animation:cloud_three 100s linear infinite;
  -o-animation:cloud_three 100s linear infinite;
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  -o-transform:translate3d(0,0,0)
  ; }
   
  @-webkit-keyframes sky_background {
  0% {
  background: no-repeat #007fd5;
  color:#007fd5
  ; }
   
  50% {
  background: no-repeat #000;
  color:#a3d9ff
  ; }
   
  100% {
  background: no-repeat #007fd5;
  color:#007fd5
  ; }
  }
   
  @-webkit-keyframes moon {
  0% {
  opacity: 0;
  left:-200%
  ; -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  }
   
  50% {
  opacity: 1;
  -moz-transform: scale(1);
  left:0%
  ; bottom:250px;
  -webkit-transform: scale(1);
  }
   
  100% {
  opacity: 0;
  bottom:500px;
  -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  }
  }

  /* yraaa.ru */

  @-webkit-keyframes cloud_one {
  0% {
  left:0
  ; }
   
  100% {
  left:-200%
  ; }
  }
   
  @-webkit-keyframes cloud_two {
  0% {
  left:0
  ; }
   
  100% {
  left:-200%
  ; }
  }
   
  @-webkit-keyframes cloud_three {
  0% {
  left:0
  ; }
   
  100% {
  left:-200%
  ; }
  }
   
  @-moz-keyframes sky_background {
  0% {
  background: no-repeat #007fd5;
  color:#007fd5
  ; }
   
  50% {
  background: no-repeat #000;
  color:#a3d9ff
  ; }
   
  100% {
  background: no-repeat #007fd5;
  color:#007fd5
  ; }
  }
   
  @-moz-keyframes moon {
  0% {
  opacity: 0;
  left:-200%
  ; -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  }
   
  50% {
  opacity: 1;
  -moz-transform: scale(1);
  left:0%
  ; bottom:250px;
  -webkit-transform: scale(1);
  }
   
  100% {
  opacity: 0;
  bottom:500px;
  -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  }
  }
   
  @-moz-keyframes cloud_one {
  0% {
  left:0
  ; }
   
  100% {
  left:-200%
  ; }
  }
   
  @-moz-keyframes cloud_two {
  0% {
  left:0
  ; }
   
  100% {
  left:-200%
  ; }
  }
   
  @-moz-keyframes cloud_three {
  0% {
  left:0
  ; }
   
  100% {
  left:-200%
  ; }
  }
</style>