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

0 Response to "Loading Blog dengan Keyframes dari Bawah ke Atas"

Posting Komentar