CSS Animasi Untuk Pemula

Saat ini banyak website yang dilengkapi dengan efek animasi yang keren baik itu berupa animasi tombol, background, image gallery dan sebagainya. Pada tutorial sebelumnya kita telah membahas cara membuat animasi gallery dengan menggunakan property css seperti transform, opacity, dan transition. ketiga properti ini sangat sering digunakan dalam pembuatan animasi sederhana.

Kali ini kita akan mempelajari CSS Animasi dengan menggunakan fungsi keyframes. Keyframes merupakan pengaturan tahapan atau proses animasi bekerja.

Contoh diatas mendefinisikan animasi dengan nama hilang yang memiliki efek transisi dari opacity:1 menjadi opacity:2.

Animasi keyframes diatas akan dipanggil dengan cara seperti berikut :

Untuk lebih memahami saya akan memberikan contoh CSS animasi sederhana dari tutplus. Melalui animasi ini anda akan mengerti proses pembuatan animasi yang sebenarnya. Silakan download kodenya dibawah ini.

Download