Membuat Efek Loading Blog dengan @KeyFrames

Indonesian Information - Hari ini saatnya admin 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.

• Pertamax, masuk ke Edit HTML
• Keduax, cari dengan ctrl+f tulis  ]]></b:skin>
• Masukkan kode berikut di atas kode  ]]></b: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.

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.

Tweet

Postingan terkait:

— 12 Comments — Computer, Health and News, Tips And Tricks