Load Page Blog Lebih Keren Dengan Keyframes

Welcome To GENETIK [ Generasi Teknik Informatika ] :

Hallo Semua Sobat Inside Lovers, kali ini Blog's GENETIK [ Generasi Teknik Informatika ] akan memposting Load Page Blog Lebih Keren Dengan Keyframes,
oke tanpa basa basi lagi liat tutorialnya di bawah :

Cara membuatnya sangat simple tinggal meletakan kode CSS 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;}
#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;}

Catatan : Jika sobat ingin membuat efek pada instrumen lain misanya menu sobat tinggal menambah kode css berikut :

•  #nama instrumen {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;} 
• Misalnya #nav {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}

Mohon maaf jika penjelasannya agak membingungkan karena saya agak susah untuk menjelaskannya,jika ada pertanyaan silahkan tinggalkan jejak di kotak komentar,...


sumber ilmu : Musa Khairul Umam dan Zona Download Gratis