Belajar @keyframes Dengan Mudah

setelah minggu kemarin memberi tutorial untuk pemula sekarang kita beranjak ke tutorial yang skillnya lebih tinggi... tutorial dimulai.....




coba kita lihat kotak no 1 yang sedang bergerak , (tapi jangan dilihat terus ya ntar pusing hehehe). Tahukah Anda itu dibuat memakai CSS Animation atau biasa disebut @keyframes , itu di buat dengan contoh css berikut ini :

#kotak{ width:60px; height:60px; background:#000000; border:1px inset #fff; box-shadow:0 0 3px #000; position:relative; animation:plustutorial 5s infinite; -moz-animation:plustutorial 5s infinite; -webkit-animation:plustutorial 5s infinite; }

@keyframes plustutorial{ 
0% {left:0px;width:60px;}
25% {left:100px; background:#92B901;width:70px;}
50% {left:20px; background:#FB7532;width:85px;}
75% {left:110px; background:#1EC7E6;width:100px;}
100% {left:0px; background:#000;width:600px;} }

@-moz-keyframes plustutorial{
0% {left:0px;}
25% {left:100px; background:#92B901;width:70px;}
50% {left:20px; background:#FB7532;width:85px;}
75% {left:110px; background:#1EC7E6;width:100px;}
100% {left:0px; background:#000;width:60px;} }

@-webkit-keyframes plustutorial{
0% {left:0px;}
25% {left:100px; background:#92B901;width:70px;}
50% {left:20px; background:#FB7532;width:85px;}
75% {left:110px; background:#1EC7E6;width:100px;}
100% {left:0px; background:#000;width:60px;} }

 dan kode htmlnya sebagai berikut :

<br />
<div id="kotak">
</div>
<br />

nah pertama kali kita lihat kode yang diberi warna hitam pada background , nah itu merupakan css utama , dan dibagian ini ada yang di sebut @keyframes yaitu yang seperti begini :  -webkit-animation:plustutorial 5s infinite; , oke sudah sekarang tau kan @keyframes ,sekarang kita lihat bagian bagiannya , kata -webkit-animation:plustutorial Menunjukan kunci animasi, kalau kata  5s  menunjukan kecepatan waktu (second) animasi bergerak, sekarang kita kembali lagi pada kunci animasi  -webkit-animation:plustutorial , setelah kita buat kunci -webkit-animation:plustutorial otomatis kita harus membuat tugas si  -webkit-animation:plustutorial karena ini animasi jadi kita harus memnentukan saat 0 % harus bagaimana, 25 % harus bagaimana dan seterusnya. (pikirkan saja gambar gif kan terdiri dari gambar gambar yang berubah secara cepat sehinnga membentuk animasi), contoh saya memerintahkan tugas -webkit-animation:plustutorial dengan kode berikut :

@-webkit-keyframes plustutorial{
0% {left:0px;}
25% {left:100px; background:#92B901;width:70px;}
50% {left:20px; background:#FB7532;width:85px;}
75% {left:110px; background:#1EC7E6;width:100px;}
100% {left:0px; background:#000;width:60px;} }

nah setiap pemberian tugas pada @keyframes yah jelas kita harus memerintahkan kunci tugas dengan awalan kata @ , selanjutnya coba kita pahami perintah kode diatas, kode diatas memerintahkan bahwa saat 0 persen posisi dari kiri ke kanan 0 px sedangkan saat 25% posisi berubah  kiri ke kanan menjadi 100px, dengan warna backgroundpun berubah menjadi #9B901  lebar pun menjadi 70 px dan seterusnya.....,
         Yah mungkin itulah tutorial yang saya sampaikan (eh..., eh kok udahan ??  itu masih ada kode yang gk dijelasin...) oh yah... hehehe, kode

@keyframes plustutorial{
0% {left:0px;width:60px;}
25% {left:100px; background:#92B901;width:70px;}
50% {left:20px; background:#FB7532;width:85px;}
75% {left:110px; background:#1EC7E6;width:100px;}
100% {left:0px; background:#000;width:600px;} }

@-moz-keyframes plustutorial{
0% {left:0px;}
25% {left:100px; background:#92B901;width:70px;}
50% {left:20px; background:#FB7532;width:85px;}
75% {left:110px; background:#1EC7E6;width:100px;}
100% {left:0px; background:#000;width:60px;} }

itu sama seperti yang tadi saya jelaskan :

@-webkit-keyframes plustutorial{
0% {left:0px;}
25% {left:100px; background:#92B901;width:70px;}
50% {left:20px; background:#FB7532;width:85px;}
75% {left:110px; background:#1EC7E6;width:100px;}
100% {left:0px; background:#000;width:60px;} }

benar kan ?? nah sekarang kita lihat awal kata sesudah @...., hmmm, yap benar yaitu -webkit , selanjutnya perhatikan kode diatas yang belum dijelaskan, yap benar lagi berawalan  -moz dan ada yang tidak berawalan...... itu yg umum (IE8), (lalu apa hubungannya ???) begini nih setiap browser itu berbeda beda pembacaan, contohnya google chrome memakai awalan -webkit , Morzila Firefox memakai awalan -Moz dan Opera juga berwalan -o .. (namun untuk IE Explore 6 dan 7 tidak mendukung @keyframes), nah bisa saja kita hanya menulis salah satunya namun jika kita menulis yang berawalan -webkit saja itu ber-arti hanya pemakai google chrome saja yang bisa melihat, tetapi kan di dunia ini bukan google chrome saja contohnya firefox ,sama halnya dengan chrome, firefox juga akan terlihat animasinya jika memakai awalan -moz , begitu juga dengan yang lain...., jadi jika anda ingin tampilan kotak tersebut terlihat dibanyak browser yah pake saja ketiga - tiga nya.. sudah mengerti ?? jika belum silahkan komentar saja...., oke,
oh ya..., kode yang diatas itu hanya merupakan percontohan saja , jika mungkin anda sudah mengerti dasar CSS Insya Allah pasti bisa mengkreasikannya lagi..

Yah akhirnya selesai juga (waduh... pegel ngetik nih..., hehehe), sekian dari saya dan semoga bermanfaat
untuk ver. 2 nanti saya akan menjelaskan tetang yang memakai from dan to....