Halo sobat Rumah Coding, pada kesempatan kali ini kita akan membuat animasi css dengan menggunakan Animate.css. Animasi ini untuk gambar, teks dan elemen lain. Mau tau gimana caranya? Yuk, kita masuk ke pembahasannya.
Apa itu Animate.css
Animate.css adalah sebuah library css yang dibuat oleh Daniel Eden. Dia mengembangkan dan membagikan Animate.css melalui github.com.
Kegunaan Animate.css ini adalah untuk membantu kita ketika ingin membuat animasi secara praktis dan kita tidak perlu membuat animasi secara manual. Caranya hanya dengan menuliskan class yang sudah disediakan ke dalam tag html, dan jadilah efek animasi yang kita inginkan. Untuk lebih lengkap nya bisa https://daneden.github.io/animate.css/.
Baiklah, Saya rasa Teman-teman sudah paham tentang Animate.css. Kita langsung lanjut ke tutorialnya yaa!
Cara membuat animasi dengan animate.css
Jadi kita sekarang akan membahas bagaimana caranya membuat animasi hanya dengan menggunakan Animate.css. Berikut ini adalah Langkah-langkah yang harus dilakukan untuk membuat animasi dengan Animate.css.
Menyambungkan Animate.css
Kita dapat menyambungkan Animate.css dengan html kita dengan cara menggunakan CDN yang sudah tersedia pada link berikut https://daneden.github.io/animate.css/ .
Sambungkan file Animate.css
Setelah mengambil CDN pada github, kita bisa menaruh link CDN tersebut pada tag head di file html kita. Seperti gambar dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Cara Membuat Animasi Dengan Animate.css</title>
</head>
<body>
</body>
</html>
Copy class Animate.css yang kita inginkan
Selanjutnya kita tinggal copy kan class animasi yang kita mau. Kalian bisa melihat class animasi yang bisa dipilih di bagian kanan pada website Animate.css . Kalian juga bisa melihat animasinya dengan mengklik nama nama class yang sudah tersedia. Contohnya disini Saya akan menggunakan class animasi animate__shakeY . Untuk menggunakan class animasi ini kita harus menambahkan animate__animated. Contohnya seperti dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Cara Membuat Animasi Dengan Animate.css</title>
</head>
<body>
<h1 class="animate__animated animate__shakeY">Hello World!</h1>
</body>
</html>
Jika kita ingin efek animasi kita bergerak secara terus menerus kita bisa menggunakan class animate__infinite. Seperti ini contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Cara Membuat Animasi Dengan Animate.css</title>
</head>
<body>
<h1 class="animate__animated animate__shakeY animate__infinite">Hello World!</h1>
</body>
</html>
Kalian bisa mengkreasikan ide kalian dengan menggunakan class yang ada pada Animate.css, jadi ayo buatlah kreasi kalian yang bagus dan menarik!!
Efek animasi yang ada pada Animate.css
Kalian bisa cek link dibawah untuk melihat animasi apa saja yang ada di animate.css :
https://daneden.github.io/animate.css/ .
