Kang Rian [ on Blogger! ]

rian nurherdian, kang rian, blog kang rian, blog rian nurherdian, blogger hacks , free blogger templates, blogspot tutorial, blogger tutorial, tutorial seo, tutorial html5, blog seo friendly, modifikasi template blog, desain web pemula, blogger basic

Basic Pembuatan Animasi Awan dengan CSS3

Basic Pembuatan Animasi Awan dengan CSS3 - css3 cloud animation pngPada 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.
Suka artikel ini? Bagikan!