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.

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;}

Browser

Browser	Animation
Firefox	-moz-animation: myfirst 5s
Chrome	-webkit-animation: myfirst 5s

Pada tabel browser pendung yang saya buat untuk browser Firefox dengan atribut -moz- dan Chrome/safari dengan atribute -webkit- ,untuk browser Opera tinggal tambahkan awalan -o- jika animasi ini mendukung.

Sekian Tutorial cara membuat animasi loading halaman blog dengan @keyframes semoga bisa bermanfaat dan semoga berhasil, berkomentar selalu membangun kreativitas lebih baik,maka buatlah sebuah diskusi dengan pertanyaan yang baik pula.