Cara Menggunakan Animate

4 min read Jul 20, 2024

Cara Menggunakan Animate.css

Animate.css adalah library CSS yang berisi kumpulan animasi siap pakai yang dapat dengan mudah ditambahkan ke elemen HTML Anda.

Menambahkan Animate.css ke Proyek Anda

Ada beberapa cara untuk menambahkan Animate.css ke proyek Anda:

Menggunakan CDN: Anda dapat menambahkan Animate.css ke proyek Anda dengan menggunakan CDN (Content Delivery Network) seperti berikut:
Mengunduh File: Anda dapat mengunduh file Animate.css dari website resminya dan memasukkannya ke dalam folder proyek Anda. Kemudian, tambahkan link ke file tersebut dalam tag <link> di HTML Anda.

Menggunakan Animasi dalam HTML

Setelah menambahkan Animate.css ke proyek Anda, Anda dapat menggunakan animasi dengan menambahkan class ke elemen HTML yang ingin Anda animasikan.

Contoh:




  
  
  Animate.css Example
  


  Hello World!

Kode di atas akan menampilkan teks "Hello World!" dengan animasi "bounce".

Mengatur Animasi

Anda dapat mengatur animasi dengan beberapa cara:

Menambahkan Class: Tambahkan class tambahan untuk mengatur durasi, delay, dan pengulangan animasi.

Contoh:
```
    Text with bounceInLeft animation, slow duration
```

Menggunakan Javascript: Anda dapat menggunakan Javascript untuk menambahkan dan menghapus class animasi pada elemen HTML.

Contoh:

const element = document.querySelector('.my-element');
element.classList.add('animated', 'fadeIn'); // Mengaktifkan animasi "fadeIn"
setTimeout(() => {
    element.classList.remove('fadeIn'); // Menghapus animasi "fadeIn"
}, 2000); // Setelah 2 detik

Menambahkan Atribut CSS: Anda juga dapat mengatur animasi dengan menggunakan atribut CSS seperti animation-duration, animation-delay, dan animation-iteration-count.

Contoh:
```
.my-element {
    animation-name: bounceInLeft;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: 2;
}
```

Daftar Animasi di Animate.css

Animate.css menyediakan berbagai macam animasi yang dapat Anda gunakan. Anda dapat melihat daftar lengkapnya di website resmi Animate.css.

Kesimpulan

Animate.css adalah alat yang mudah digunakan dan efektif untuk menambahkan animasi ke halaman web Anda. Dengan menggunakan library ini, Anda dapat membuat halaman web yang lebih menarik dan dinamis.

Cara Menggunakan Animate