Animasi Awan dengan CSS ( Pure CSS3 )

Info : http://rian-nurherdian.blogspot.com

HTML

<div id="awan">
    
Animasi Awan dengan CSS ( Pure CSS3 ) ©2014 - By : <a href="http://blog.kangrian.com" target="_blank">Kang Rian</a>
    
</div>

CSS

body { background-color:#C0DEED; margin:0 auto; 
font-family:arial; font-size:110%; color:#fff;text-shadow:1px 1px 3px #aaa;text-align:center;}
a { text-decoration:none; color:#444; border-bottom:1px dashed #444; padding-bottom:3px; }

/* Awalan Code CSS3 Animasi Awan */
#awan {
background-color:#C0DEED;
background: url(https://abs.twimg.com/images/themes/theme1/bg.png) center top repeat-x;
padding-top:100px;
padding-bottom:10px;
  width: 100%;
  height: 135px;
  animation: awan-animasi 10s linear infinite;
  -ms-animation: awan-animasi 10s linear infinite;
  -moz-animation: awan-animasi 10s linear infinite;
  -webkit-animation: awan-animasi 10s linear infinite;
}

@keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  };
}

@-webkit-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  };
}

@-ms-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  };
}

@-moz-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  };
}

JavaScript

GUNUNG