Loading Blog dengan Keyframes dari Bawah ke Atas

Loading Blog dengan Keyframes dari Bawah ke Atas | kali ini saya akan share Loading Blog dengan Keyframes dari Bawah ke Atas.  Untuk Demonya silahkan anda liat pada blog ini :D
Oke langsung saja ya :

• Cari Kode :

 ]]></b:skin> 

• Letakkan Kode Dibawah ini tepat diatas Kode yang dicari tadi :

@-webkit-keyframes css3Animasi{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(10)}} @-moz-keyframes css3Animasi{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(10)}} @-ms-keyframes css3Animasi{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(10)}} @-o-keyframes css3Animasi{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(10)}} @keyframes css3Animasi{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(10)}} 

• Lalu cari kode yang ingin di Terapkan Trik ini

Cntohnya :

header-wrapper{blabla;blabla}

• Copy Kode dibawah ini

-webkit-animation:css3Animasi 4s ease-in;-moz-animation:css3Animasi 4s ease-in;-ms-animation:css3Animasi 4s ease-in;-o-animation:css3Animasi 4s ease-in;animation:css3Animasi 4s ease-in

•  Pastekan ke kode yang dicari tadi, nanti jadinya akan seperti ini :

header-wrapper{blabla;blabla;-webkit-animation:css3Animasi 4s ease-in;-moz-animation:css3Animasi 4s ease-in;-ms-animation:css3Animasi 4s ease-in;-o-animation:css3Animasi 4s ease-in;animation:css3Animasi 4s ease-in}

• Klik Simpan dan Liat Hasilnya

Semoga Bermanfaat :D

Sumber 

Credit : http://www.ardi007jr.blogspot.com/2013/01/loading-blog-dengan-keyframes-dari.html#ixzz2L8zMTxtI

Tweet