CSS Loading blog dengan @keyframes

June 19, 2012

CSS Loading blog dengan @keyframes - Nah daripada bengong ngak jelas ngliatin blog yang jarang posting ini mari kita semarakan dengan tutorial yang satu ini yaitu CSS Loading blog dengan @keyframes, merupakan salah satu keajaiban CSS yang dapat membuat blog kita lebih terlihat elegan.
Ciri-ciri tutorial ini adalah memberikan bayangan hitam/senyap ketika berpindah ke lain page dan awalan page untuk lebih jelasnya bisa lihat demonya klik pada link dibawah ini

Demo

Langsung saja kita menginjak kelangkah-langkah pembuatannya.

Pertama-tama marilah kita baca basmallah terlebih dahulu kemudian
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Back Up Template untuk berjaga-jaga apabila terjadi kesalahan dan setelah semua itu dilakukan mari kita ke

Langkah 1
Cari kode ]]></skin> jika kesulitan gunakan ctrl+f untuk mencarinya, setelah itu tempatkan kode dibawah ini diatasnya:

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

Langkah 2
Simpan Template dan lihat hasilnya.

Keterangan

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/td>

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.

Semoga bermanfaat selamat mencoba dan semoga berhasil
thanks to .CSS.Tuts+

Labels: Blog Design