Skill Level
Beginner
Categories
Web Development
Reading Time
2 minutes, 46 seconds
Technology
CSS
Framework
No framework
Library
Animate.css
Tutorial Menggunakan Animate.css

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 animated untuk menjalankannya. Untuk class animasinya kamu bisa lihat sendiri di situs dimana kamu download animate.css tadi.

Demo

 

Final Words

Semoga bermanfaat tutorial cara penggunaan animate.css ini dan sampai jumpa ditutorial berikutnya.

Topik:

Baca juga post berikut

9 Alasan Kenapa Kamu Harus Belajar Ionic...

Membuat Login System Dengan PHP & MySQL

Muhamad Nauval Azhar
3 years ago  •  Posted by
Muhamad Nauval Azhar
Junior Programmer

lorem ipsum dolor sit amet

Dapatkan notifikasi untuk setiap artikel baru dan jadilah yang pertama tahu!