Animasi sederhana part 2 - CSS

Disini dilanjutin maenan animasi untuk CSS yang sebelumnya ada di sini. Nah... disini kita akan melihat bagian2 lain dari animasi di CSS ini.... okie... tampilan kode yang pertama seperti di bawah:

Kodenya ampir sama kyk yang dipostingan sebelumnya, disini yang beda plng yang line 10, 11, dan 18. Nah klu yang line 10 itu jelas itu nentuin arah nilainya bisa "normal", sm "alternate", terus yang 11 itu tipe-tipe style gerakan animasinya, tar kita coba satu-satu digimana efek2nya klu pake tipe yang laen, terus yang line 18, itu ukuran awalnya, dan diline 26 itu ukuran akhir. Nah biar jelas hasilnya seperti ini ehehehe... :D

Terus... Hisoka nambain yang ini "margin:300 auto;" so:

Hasilnya :

yaah.... seperti namanya margin itu ngubah2 posisi marginnya ehehehe... :D silahkan dioprek2 sendiri nilai2nya.... :D terus ditambain "border-radius: 100%;" seperti terlihat di bawah :

Di kode itu 0% border-radiusnya 100% brti dibagian awal jadi bulat terus diakhir2 jadi kotak, soalnya dibagian akhir (yang di 100%) belum ditambain border-radius makanya tampilannya adalah kotak seperti terlihat di bawah :

Jadi klu misalkan kita tambain border-radius: 100% dibagian akhir tar ujung2nya semuanya bulat...

Berikutnya kita ganti directionnya menjadi "normal" :

Daaan...perubahannya....

Wwkwkwkw.... bagusan yang "alternate" yaah... jadi silahkan balikin lagi ke alternate... terus yang diganti berikutnya adalah timing-functionnya, sebelumnya timing-function itu ada beberapa tipe yang bisa dipake misalnya ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1,x2,x3,x4) {cubic-bezier(0.5, 0.2, 0.3, 1.0);}... eeemmm... nyobain yang mana yaaah...! coba yang linear dl....  jadi silahkan diganti ke "linear"

Efeknya

Terus kita coba yang ease-in-out :

Eeeeh.... kekna g' trll jauh bedanya ahahaha.... berikutnya yang cubic-bezier(0.5, 0.7, 0.8, 1.0); daaan ini yang terakhir... jadi dikasih liad kode lengkapnya ajjah seperti di bawah :

Efeknya adalaaaaah....

Yaaapzzz... cukup demikian yang part 2... moga bisa ngeliad efek2 tiap fitur klu diubah... :-)