Membuat Animasi Karakter Hantu Lucu dengan CSS

Hallo semuanya, pada kesempatan kali ini saya akan memberikan lanjutan dari kedua artikel saya sebelumnya. Kali ini kita masih membahas tentang karakter hantu yang kita buat pada artikel saya yang berjudul membuat hantu lucu dengan css bagian 1 dan  membuat karakter hantu lucu dengan css bagian 2.

Bentuk hantunya sudah kita dapatkan, maka artikel kali ini kita akan memberikan efek animasi agar terlihat lebih hidup.

Kali ini kita akan membuat masing-masing animasi untuk badan, mata, mulut, dan ekor hantunya juga dengan memanfaatkan fungsi @keyframe pada css. Berikut adalah masing-masing animasi yang akan kita berikan

Animasi untuk mata

Buat mata jadi membesar dan mengecil

Animasi untuk mulut

buat mulut berubah menjadi oval dan kembali ke lingkaran

Animasi untuk badan hantu

Membuat badan hantu menjadi bergoyang ke kiri dan ke kanan

Animasi untuk ekor

Membuat ekor bergeser ke kiri dan kanan secara cepat.

Untuk lebih jelasnya kalian bisa lihat demo nya seperti dibawah ini