Efek Animasi Keyframes

Akhirnya kali ini saya bisa update tips n tricks blogger lagi , pada kesempatan kali ini saya ingin share "Cara Membuat Efek Animasi Keyframes" bagi yang belum tau Keyframes saya jelaskan
Keyframes adalah semacam kode untuk membuat efek animasi saat membuka blog,, untuk demo keyframes silahkan lihat demonya di blog ini..

Nah bagi yang sudah penasaran dengan cara membuat efek animasi keyframes ini cekidot yuk gan,,

1. Login Ke Account Blogger Masing2x
2. Klik Rancangan
3. Klik Edit HTML atau Elemen Laman.
Untuk membuat css di Elemen Laman agan cuma harus memberi kode
<style type='text/css'>CODE CSS NYA</style>
<div id='ID CSS NYA'></div> dan bila agan-agan membuatnya di Edit HTML tinggal mencari kode ]]></b:skin> dan letakan kode css nya diatas kode ]]></b:skin> itu,, nah bagi yang belum tau cssnya silahkan copaz semua kode yang ada dikotak dibawah ini :



Silahkan Dicopaz
@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 dode
{
from{transform:translate(0px, 9000px)}
to{transform:translate(0px, 0px)}
}
@-moz-keyframes dode
{
from{-moz-transform:translate(0px, 9000px)}
to{-moz-transform:translate(0px, 0px)}
}
@-webkit-keyframes XP Style
{
from{-webkit-transform:translate(0px, 9000px)}
to{-webkit-transform:translate(0px, 0px)}
}
#outer-wrapper{animation: myfirst 2s;-moz-animation: myfirst 2s;-webkit-animation: myfirst 2s;}
#main-wrapper{animation: myfirst 3s;-moz-animation: myfirst 3s;-webkit-animation: myfirst 3s;}
h1,h2,h3,#id css{animation: myfirst 4s;-moz-animation: myfirst 4s;-webkit-animation: myfirst 4s;
h1,h2,h3,.post img{animation: myfirst 4s;-moz-animation: myfirst 4s;-webkit-animation: myfirst 8s;}


"Jika masih bingung silahkan tinggalkan Komentar , Semoga bermanfaat"