Cara Menggunakan Animate CSS

Hai semua, apa kabar? Apa kalian penasaran bagaimana cara membuat tulisan ataupun gambar menjadi bergerak-gerak sendiri dengan menggunakan CSS? Penasaran kan? Untuk itu ayo kita coba animate.css yang dibuat oleh Dan Eden. Penggunaannya cukup mudah. Perhatikan :

Langkah pertama :

Buka link http://daneden.github.io/animate.css/ setelah itu akan muncul banyak pilihan animate yang bisa digunakan. Klik Animate it untuk melihat hasilnya. (Perhatikan perubahan pada tulisan : Animate.css)

Langkah kedua :

Klik pada tulisan Download Animate.css, lalu akan muncul tulisan seperti ini :

Langkah ketiga :

Ketikkan Ctrl+A (Select All) lalu Ctrl+C(Copy) pada keyboard dan buat file css bernama : animate.css (sesuai keinginan) dan ketikkan Ctrl_V (paste). Jangan lupa untuk disimpan.

Langkah Keempat :

Buat file html bernama : index.html (sesuai keinginan) lalu buat script seperti ini :

Keterangan :

- pada line 6 digunakan untuk menyambungkan html dan css

- pada line 10 class yang dipanggil dari css adalah animated dan bounce (memantul)

Langkah Kelima :

Save dan buka index.html. Perhatikan pada tulisan : Ini Animate CSS. Jika direfresh (F5) tulisan tersebut akan memantul.

Nah, mudah bukan menggunakan animate.css? CSS ini bisa diaplikasikan bukan hanya pada tulisan saja, gambar dan yang lainnya pun bisa. Oleh karena itu, selamat berkreasi teman :) Semoga artikel ini bermanfaat ya :)