Animasi Awan Bergerak Memakai Css3

Make Cloud Animation From CSS3

Sebenarnya cuma iseng-iseng aja ngedit CSS sambil berguru CSS3 dari blog kang rian, nemunya animasi awan bergerak ini. Ane utak atik trus kesudahannya gini deh hehe. Bagi yang ingin mencoba menciptakan silahkan di coba sendiri ya..

Berikut CSS dan instruksi pemanggilnya

#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;   }; }

<div id="awan"> <center> <strong>Isikan Link, Tulisan, atau Gambar Apapun disini</strong></center> </div>

Awesome Cloud Animation From CSS3

Source : https://rodamotiv.blogspot.com//search?q=basic-pembuatan-animasi-awan-dengan-css3