Loading Animation dengan Keyframes


Membuat efek animasi loading dengan menggunakan keyframes. Pada saat kita membuka suatu blog biasanya ada beberapa blog yang menggunakan efek loading seperti menampilkan gambar bahwa blog yang di tuju sedang dalam proses loading, ada juga yang menggunakan efek tabir atau tidak akan menampilkan halaman sebelum efek loading selesai dengan sempurna.
Namun kali ini saya akan coba berbagi cara membuat efek loading pada blog menggunakan keyframes. Jadi pada saat proses loading blog akan menampilkan sedikit demi sedikit mulai dari elemen yang trasnparan hingga halaman blog terload sepenuhnya. Di sini efek yang digunakan yaitu menggunakan efek keyframes opacity.

Cara pemasangannya pada edit HTML cari kode  ]]></b:skin> lalu salin kode berikut dan letakkan di atas kode ]]></b:skin>

@-webkit-keyframes  bangbungg  {
from{opacity:0;}
to{opacity:1;}
}
@-moz-keyframes  bangbungg  {
from{opacity:0;}
to{opacity:1;}
}
@-ms-keyframes bangbungg {
from{opacity:0;}
to{opacity:1;}
}
@keyframes  bangbungg  {
from{opacity:0;}
to{opacity:1;}
}

Setelah itu cara penggunaanya dengan memanggil kode keyframes tadi pada elemen yang akan kita beri efek loadingnya misal pada #main-wrapper seperti ini

#main-wrapper{
height:300px;
width:100px;
background:#ccc;
-webkit-animation:  bangbungg  4s;
-moz-animation:  bangbungg  4s;
-ms-animation:  bangbungg  4s;
animation:  bangbungg  4s;
}

efek ini juga dapat diterapkan pada elemen lain seperti #sidebar-wrapper, #header, ataupun elemen lainnya. Semoga bermanfaat.

9 komentar:

  1. Balasan
    1. iya mas, mantap :D
      thank's infonya :D

      Hapus
  2. Tukeran link yok!! sesama anggota PBI nih,, kalo mau tolong konfirmasi ke blog gw!

    BalasHapus
    Balasan
    1. sudah terpasang mas di tunggu link backnya :)

      Hapus
  3. wah keyen nih,hehee...
    ngemeng" thread commentnya hampir mirip sama saya :)

    BalasHapus
    Balasan
    1. kurang tau sudah dari sananya, ga say ubah2 lgi. :D

      Hapus
  4. waokaokaoa....
    emang,saya juga ngabil css komentnya dari template sora,jadi hampir mirip gitu hehehe...

    BalasHapus
  5. Ane coba prektek um..
    hehehe.. assikk...!!
    makasih yaah.. :)

    BalasHapus

Silahkan berkomentar dengan bahasa yang baik sesuai dengan isi artikel :)