Membuat efek loading halaman dengan CSS @keyframes

CSS @keyframes

Hari ini saatnya saya akan membuat tutorial Membuat efek loading halaman dengan CSS @keyframes. kali ini kita akan menerapkannya pada saat halaman blog di muat, dan akan menimbulkan efek animation dengan smooth(halus) tanpa bantuan jQuery. jika kalian ingin memasangnya pada blog terutama pengguna blogger silahkan di simak tutorialnya...

Demo

Masuk edit Templates dan letakan css berikut di atas code ]]> :

@keyframes myfirst
 {
 from{opacity:0;}
 to{opacity:10;}
 }
@-moz-keyframes myfirst
 {
 from{opacity:0;}
 to{opacity:10;}
 }
@-webkit-keyframes myfirst
 {
 from{opacity:0;}
 to{opacity:10;}
 }
@keyframes
 {
 from{transform:translate(0px, 9000px)}
 to{transform:translate(0px, 0px)}
 }
@-moz-keyframes
 {
 from{-moz-transform:translate(0px, 9000px)}
 to{-moz-transform:translate(0px, 0px)}
 }
@-webkit-keyframes
 {
 from{-webkit-transform:translate(0px, 9000px)}
 to{-webkit-transform:translate(0px, 0px)}
 }
body {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}

Simpan Template dan lihat Hasilnya.

Element body diatas anda ganti dengan element yang lain jika anda memilih untuk tidak memakai nya pada keselurahan badan blog anda MISALNYA: #sidebar-wrapper, #main-wrapper, #header-wrapper dll.
5s merupakan waktu bergeraknya efek, semakin besar angkanya maka semakin lambat. Semoga berguna..