Cara Mudah Menambahkan Animasi CSS3

Kali ini Blog myrplgroup akan bermain-main Animasi dengan menggunakan animate.css. Lho, emang CSS bisa buat animasi gitu ? Whooo iya donk, CSS3 memang sudah mendukung efek animasi yang tidak kalah bagusnya dengan flash.
Apa itu animate.css ? Animate.css adalah library animasi CSS3 siap pakai, ada beberapa kategori animasi mulai dari animasi untuk meminta perhatian (seeking attention) sampai animasi masuk dan keluar(in/out). 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 anda 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 anda dapat mendownload seluruh library atau memilih animasi apa saja yang anda butuhkan dengan melakukan “Custom Build”. Andapun dapat melihat contoh animasinya dengan mengklik tipe-tipe animasi yang ada dan perhatikan animasi yang akan dihasilkan.
Kompatibilitas
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.
Penggunaannya sangat mudah, anda tinggal menambahkan class yang telah disediakan oleh animate.css dan element yang anda beri classpun akan bergerak sesuai dengan tipe animasi yang dipilih. Pertama-tama, download library animate.css dari link yang saya sebutkan di atas, lalu sertakan dalam dokumen HTML anda dengan menggunakan tag link.

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

 Setelah itu kita tinggal menambahkan class animated dan nama animasi 
yang disediakan. Contohnya kita ingin membuat animasi bounce dari kiri.

 <div class="animated bounceInleft">Woeewwwww.... Woeeewwwww.... OK</div>

 Dengan demikian div tersebut akan beranimasi seolah-olah memantul masuk 
dari sebelah kiri. Untuk merubah durasi dari animasi, atau menambahkan 
delay sebelum animasi dijalankan atau anda ingin agar animasi dijalankan
 secara terus-menerus anda dapat menambahkan style berikut :

 div{
    -browser-animation-duration: 3s; /* animasi akan berjalan selama 2detik */
    -browser-animation-delay:5s; /* animasi akan dijalankan setelah 5detik */
    -browser-animation-iteration-count: infinite; /* akan menjalankan animasi secara terus menerus. */
}

Ingat, kata -browser diatas harus diganti dengan -webkit, -moz, -ms dan 
-o sesuai dengan apa yang kita butuhkan untuk lintas browser. Untuk 
daftar nama animasi yang bisa anda gunakan bisa dilihat dilink yang 
telah saya sebutkan di atas jadi tinggal anda yang berkreasi :)