Jika pada tutorial sebelumnya kita belajar menggunakan CSS3 transition untuk membuat transisi, kali ini ktia akan menggunakan keyframe, jadi kita bisa membuat animasi yang lebih kompleks

Seperti tutorial sebelumnya, prefiks yang digunakan adalah -webkit- dan -moz- sisanya bisa anda tambahkan sendiri :D (capek ketiknya bro)

Kode ini merupakan "settingan" dari CSS3 keyframe

@-webkit-keyframes keyframeku
{
from {top:0px;}
to {top:500px;}
}

@-moz-keyframes keyframeku
{
from {top:0px;}
to {top:500px;}
}

"keyframeku" adalah nama dari keyframe, from merupakan "awal" dari animasi dan "to" adalah elemen tersebut akan dianimasikan jadi bagaimana, contoh diatas mebmuat elemen turun kebawah sebesar 500 piksel

Selain menggunakan "from" dan "to", kita bisa menggunakan persen

@-webkit-keyframes keyframeku
{
0% {top:0px;}
50% {top:500px;}
100% {width:300px;}
}

@-moz-keyframes keyframeku
{
0% {top:0px;}
50% {top:500px;}
100% {width:300px;}
}

Kode diatas membuat elemen tersebut turun ke bawah sebesar 500 piksel dulu, lalu membuat lebar elemen tersebut menjadi 300 piksel

Nah, kode-kode diatas hanya untuk "setting" si keyframe, sekarang kita akan mengimplementasikannya pada sebuah elemen

Kita bisa melihat kalau -webkit-animation dan -moz-animation adalah inti dari kode tersebut, sekarang ane akan mejelaskan kodenya:

Lagi, animation adalah shorthand dari beberapa properti

keyframeku mendefinisikan nama dari keyframe yang digunakan untuk elemen tersebut

5s untuk membuat animasi berjalan dalam waktu 5 detik

linear coba lihat di part 1, ada penjelasannya kok

Berikut beberapa properti yang bisa ditambahkan di shorthand:

Iteration count: untuk men-set berapa kali animasi tersebut dijalankan, jika ingin dijalankan terus menerus masukkan infinite

Alternate: apakah animasinya berjalan seperti yang didefiniskan (normal), atau terbalik (reverse), atau "bolak-balik" (alternate) atau alternate-reversed

Sekian dari ane, semoga bermanfaat