Animasi Awan Bergerak Menggunakan CSS3

Make Cloud Animation From CSS3

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

Berikut CSS dan kode 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 : http://blog.kangrian.com/2014/03/basic-pembuatan-animasi-awan-dengan-css3.html

Bagikan Artikel ini