Membuat Efek Loading dengan @KeyFrames

Selamat malam sahabat blogger kali ini saya akan memposting sebuah trik yang berjudul Membuat Efek Loading dengan @KeyFrames. Kita akan menerapkannya pada saat halaman blog di muat, dan akan menimbulkan efek animation dengan smooth(halus) tanpa bantuan jQuery. Oke tanpa banyak basa basi langsung aja ke TKP :

[1] Masuk ke Edit HTML
[2] Cari kode berikut ]]></b:skin>, agar lebih mudah gunakan Ctrl+F
[3] Masukan kode dibawah ini diatas kode ]]></b:skin>

Berikut kode tersebut :
@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)} } #header-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;} #content-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;} #main-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;} #sidebar-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;} #nav {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;} h1,h2,h3,h4,h5,h6,a {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;} h1,h2,h3,h4,h5,h6,.post img {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 8s;}

Simpan dan lihat hasilnya, sekian dari saya semoga berhasil dan bermanfaat :)