0 CSS Loading Halaman Blog Dengan @keyframes

Hari ini saatnya saya akan membuat tutorial cara memasang efek loading blog keren dengan CSS @keyframes, yang sebelumnya saya sudah pernah membahas cara membuat CSS Animation @Keyframes. namun 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.

                                                                  ================

:.:VIEW DEMO::.

                                                                  ================

CSS

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

@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 Template dan lihat Hasilnya.

Penjelasan

id-widget	Animation	Time Load
#header-wrapper	myfirst	5s
#content-wrapper	myfirst	5s
#main-wrapper	myfirst	5s
#sidebar-wrapper	myfirst	5s

ID-widget di atas hanya sebagian kalian bisa menambahkan dengan widget lain . Time load adalah lama loading saat animasi bekerja dengan waktu yang di tentukan . kalian bisa menggantinya sesuai keinginan.
cara menambahkan cukup simpan properti css berikut dan ganti #id-widget dengan id template anda.

#id-widget {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}