Membuat Efek Load Page Sederhana Hanya Dengan CSS

Membuat Efek Load Page Tanpa Adanya Jquery - lihat artikel saya yang sebelum nya: CARA MEMASANG EFEK LOADING PADA BLOG
pada tutorial tersebut kita harus menggunakan jquery bukan ? dan efek tersebut gak support untuk browser mozilla. nah untuk kali ini saya akan bagikan sesuatu yang sama tapi beda Membuat Efek Load Page Sederhana Tanpa Adanya Jquery
jika sahabat gak suka dengan jquery (saya juga gak suka) maka gak ada salah nya memakai efek load page ini. tentu saja efek load page ini hanya menggunakan CSS @keyframes dan gak usah pakai script apapun sehingga blog sahabat terasa lebih ringan.
oh iya 1 lagi efek load page ini bukan hanya support pada browser chrome tapi juga mozilla :D, gak tau deh browser lain nya support atau enggak soal nya belum saya cek sendiri..
klik DEMO untuk melihat tampilan nya
langsung saja taruh CSS berikut diatas ]]></b:skin> atau </style> untuk yang sudah valid CSS3

@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;}
#main-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#nav {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#sidebar-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,#id css {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,.post img {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 8s;}

Tambahan:
jika sahabat ingin menambahkan efek load page pada elemen lain nya sahabat hanya tinggal menambahkan css seperti ini

#nama-elemen {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}

contoh dari saya

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

selamat mencoba ;)