Tutorial Menambahkan Animasi Menggunakan Animate.css

Masih pada ingat beberapa tahun lalu ketika website mengimplementasikan animasi menggunakan flash? Namun jangan berkecil hati jaman sekarang kalian juga bisa membuat animasi pada website yang kalian buat. Pemilihan library CSS yang dipilih pastikan memiliki banyak variasi dari animasi yang bisa dibuat oleh library tersebut.

animate-css

Salah satu library yang wajib kalian coba adalah animate.css. Kalian bisa menggunakan library ini secara GRATIS, library ini dibuat oleh Daniel Eden.

Dengan menggunakan library ini kalian bisa menambahkan animasi pada website kalian, dan variasi animasi yang bisa dibuat menggunakan library ini juga cukup banyak. Selain mendukung lebih dari 50 variasi animasi yang dapat dibuat untuk mengimplementasikannya cukup mudah.

Baca juga: tutorial css agar website semakin keren

Langkah pertama kalian harus download library Animate.css

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

Atau kalian juga bisa menggunakan layanan CDN jika kalian malas untuk download librarynya, berikut contoh implementasinya.

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

Setelah kalian meng-embed animate.css kedalam header kalian, langkah selanjutnya cukup dengan code dibawah ini

<h1 class="animated infinite bounce">Example</h1>

Untuk daftar list animasi yang disupport kalian bisa lihat gambar dibawah ini ya.

animate css - belajarngoding

Buat kalian yang lupa dimana downloadnya silahkan buka link dibawah ini ya

https://daneden.github.io/animate.css/

Gimana mudah bukan mengikuti Tutorial Menambahkan Animasi Menggunakan Animate.css. Jika kalian ada kesulitan jangan sungkan bertanya melalui kolom komentar ya.

Jangan lupa LIKE, SHARE ke teman kalian ya.