Animate.css merupakan sebuah library CSS3 yang dibuat oleh Dan Eden untuk mempermudah developer dalam membuat animasi pada element html tanpa harus membuatnya dari awal karena sudah disiapkan oleh animate.css.
Fitur animate.css ini saya cukup sudah lumayan lengkap dari animasi masuk(in) sampai animasi keluar(out), cara penggunaan animate.css sangatlah mudah kita hanya perlu menambahkan class animasi yang ada pada animate.css ke element html yang ingin kita beri efek animasi. Penasaran? Scroll kebawah bro!!
Step by step
1. Kita perlu library animate.css nya dulu, download disini.
2. Setelah didodwnload, masukan file animate.css ke folder website kamu.
3. Buka file html yang akan kamu beri animasi.
4. Pada tag <head> tambahkan baris kode berikut untuk memanggil file animate.css kedalam website kamu.
<link rel="stylesheet" href="animate.css" />
5. Cari element yang akan diberikan animasi, untuk contoh saya buat sebuah element html dengan text “Saya elemen dengan animasi”.
<div class="fadeIn animated"> Saya elemen dengan animasi </div>
6. Simpan dan jalankan pada browser, elemen diatas akan menghasilkan efek animasi fadeIn.
Cara Penggunaan
Pada dasarnya cara penggunaan animate.css ini sangat mudah, cukup tambahkan class css yang telah disediakan oleh animate.css pada element html yang akan kita berikan efek animasi. Sebagai contoh:
<div class="fadeIn">Hello</div>
Class css diatas akan memberikan efek animasi fade in namun dengan class seperti itu element tidak akan berpengaruh apa-apa, karena kita perlu menambahkan class berikutnya untuk menjalankan animasi yang kita inginkan. Class apa? class berikutnya yaitu animated class tersebut sangatlah penting, karena class tersebut yang akan menjalankan animasi yang diinginkan. Sebagai Contoh:
<div class="fadeIn animated">Hello</div>
Nah, sekarang baru bisa jalan animasinya. Jadi intinya cukup menambahkan class animasi yang kita inginkan dan class animateduntuk menjalankannya. Untuk class animasinya kamu bisa lihat sendiri di situs dimana kamu download animate.css tadi.
Final Words
Semoga bermanfaat tutorial cara penggunaan animate.css ini dan sampai jumpa ditutorial berikutnya.
