Basic Pembuatan Animasi Awan dengan CSS3

Pada kesempatan kali ini saya ingin berbagi sedikit source code CSS3 Animasi untuk Pemula/Basic, berbeda dengan postingan sebelumnya yaitu tentang "Struktur Dasar HTML5" & "Ektensi Google Chrome Penting Untuk Blogger" yang membahas tentang SEO dan Web Desain Tips & Trik .

Dalam postingan ini saya ingin memberitahukan Basic pembuatan Animasi Awan bergerak dengan menggunakan CSS3 Keyframe, dan untuk sahabat yang mulai penasaran silahkan lihat demonstrasi nya di bawah ini :

Cara Pembuatan

Langkah-1 (Membuat kode CSS)
Perhatikan kode CSS3 di bawah ini khusus nya pada kode warna #C0DEED dan alamat Background https://abs.twimg.com/images/themes/theme1/bg.png jika sobat ingin merubah desain/gambar awan nya suatu saat nanti, nah disini saya menggunakan gambar/background default dari situs Twitter.com dalam membuat Demo Cara Membuat Animasi Awan ini, berikut kode CSS-nya :

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

Keterangan :

Untuk mengatur kecepatan silahkan rubah semua value/nilai 10s pada kode CSS3 di atas.

Langkah-2 / Terakhir (Memanggil Kode CSS)
Dilanjut dengan Pemasangan kode HTML untuk Memanggil Code CSS3 Animation yang sudah kita buat sebelumnya. Berikut Markup HTML-nya :


<div id="awan">

.. Isi Konten di Dalam Animasi Awan! ..

</div>

Coba Langsung yuk? Klik Disini

Sekian tutorial tentang Basic Pembuatan Animasi Awan dengan CSS3, semoga bermanfaat untuk para sobat blogger yang ingin mencoba belajar CSS3 Animasi ini.