Animated Clouds

cloud.css

#clouds {
  position: absolute;
}

.one {
  top: 200px !important;
  -webkit-transform: scale(0.8);
  -webkit-animation: moveclouds 20s linear infinite;
}

.two {
  top: 225px !important;
  -webkit-transform: scale(0.2);
  -webkit-animation: moveclouds 22s linear infinite;
}

.three {
  top: 300px !important;
  -webkit-transform: scale(0.5);
  -webkit-animation: moveclouds 25s linear infinite;
}

.four {
  top: 330px !important;
  -webkit-transform: scale(1);
  -webkit-animation: moveclouds 24s linear infinite;
}

.five {
  top: 250px !important;
  -webkit-transform: scale(1);
  -webkit-animation: moveclouds 28s linear infinite;
}

.six {
  top: 280px !important;
  -webkit-transform: scale(1);
  -webkit-animation: moveclouds 32s linear infinite;
}

 

/* Cloud Keyframe Animation */
@-webkit-keyframes moveclouds {
  0% {left: 1000px;}
  100% {left: -1000px;}
}

@-moz-keyframes moveclouds {
  0% {left: 1000px;}
  100% {left: -1000px;}
}

@-o-keyframes moveclouds {
  0% {left: 1000px;}
  100% {left: -1000px;}
}

@keyframes moveclouds {
  0% {left: 1000px;}
  100% {left: -1000px;}
}

clouds.html

<div id="clouds" class="one"></div>
<div id="clouds" class="two"></div>
<div id="clouds" class="three"></div>
<div id="clouds" class="four"></div>