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.
Comments