Cara Mudah Menambahkan Animasi CSS

Animate.css adalah animasi CSS yang siap pakai dan tidak perlu susah susah untuk membuat animasi CSS bagi sobat yang kurang paham dalam memainkan CSS karena dengan bantuan dari animate.css ini sobat dapat dengan mudah menambahkan animasi dengan sangat mudah. Beberapa animasi dari animate.css ini sangat lengkap menurut saya dari fadedin dan fadedout bahkan shakes juga ada.

Untuk menggunakannya sangat mudah, sobat tinggal menambahkan class yang telah disediakan oleh animate.css dan element yang sobat beri classpun akan bergerak sesuai dengan tipe animasi yang dipilih.

animate.css yang dibuat oleh Dan Eden ini menggabungkan beberapa fitur dari CSS3 seperti animation (keyframes), transformation, dan transition, semuanya dikemas dalam class-class siap pakai, jadi jika sobat ingin menambahkan animasi sederhana, tidak perlu repot lagi membuatnya secara manual, cukup sertakan file animate.css dan tambahkan class animasi yang diinginkan.

animate.css dapat didownload di daneden.me/animate/. disana sobat dapat mendownload seluruh library atau memilih animasi apa saja yang sobat butuhkan dengan melakukan “Custom Build”. sobatpun dapat melihat contoh animasinya dengan mengklik tipe-tipe animasi yang ada dan perhatikan animasi yang akan dihasilkan.

Saat ini animate.css hanya dapat berjalan dengan baik untuk browser-browser terbaru, seperti Chrome, safari, firefox dan IE10. Mengingat animate.css menggunakan CSS3 untuk menjalankan animasinya.

Cara Mudah Menambahkan Animasi CSS

Sobat tinggal sertakan dalam link css diatas atau pasang cssnya di kode <style> seperti ini.

<link href="animate.css" rel="stylesheet"></link>
atau
<style>
kode animasi css
</style>

Kemudian sobat tinggal menambahkan class animated dan nama animasi yang disediakan. Misalnya disini saya ingin memberikan animasi FadeInUp pada sebuah gambar, maka kodenya seperti berikut:

<img class='animated fadeInUp' src='blabla'/>

Dengan begitu gambar tersebut akan beranimasi keatas.

Mengubah Durasi, delay dan perulangan

Jika sobat ingin merubah durasi dari animasi atau menambahkan delay sebelum animasi dijalankan atau sobat ingin agar animasi dijalankan secara terus-menerus sobat dapat menamabhkan style berikut:

img{
-webkit-animation-duration:2s;
-webkit-animation-delay:6s;
-webkit-animation-iteration-count:infinite;
}

Untuk animasi yang bisa digunakan sobat bisa lihat di situs dan eden karena sudah lengkap sekali untuk daftar animasi yang bisa digunakan.

Kesimpulan

animate.css dalah library Animasi CSS yang sangat keren dan cukup lengkap. Penerapannya pun tidak sulit, sobat hanya perlu menambahkan class tertentu pada elemen HTML yang ingin sobat beri Animasi.

See the Pen Animasi by Kang Iyan (@KangIyan) on CodePen.