CSS Animasi Untuk Pemula

08/11/2014    Rully Febrian    1360     Website

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.

CSS-Animasi-Untuk-Pemula

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 :

CSS-Animasi-Untuk-Pemula

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

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More