Load Page Blog Lebih Keren Dengan Keyframes

DeeJayHan-Blog- Hallo sobat blogger kali ini saya akan share tutor Load Page Blog Lebih Keren Dengan Keyframes. Trik ini semacam kode untuk membuat efek animasi saat membuka blog, Menjadikan Tampilan Blog Kita Minjadi Tambah Keren,sebenarnya saya dapat ilmu ini dari agan
Zona Download Gratis tapi berhubung sobat ane "Farixsantips" request yaudah sekalian aja ane share wkwkwk.Untuk demonya silahkan perhatikan ketika sobat membuka page di blog ini,nah itulah yang saya maksud.

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

Tweet

Subscribe to receive free email updates: