Pada postingan sebelumnya saya sudah mereview tentang membuat animasi dengan animate CSS, pada kesempatan kali ini saya akan menjelaskan cara menggunakan animate CSS di website anda.
Bagaimana caranya.?? ikuti langkah langkah berikut ini :
- Pertama download library Animate CSS, pada postingan membuat animasi dengan animate CSS sudah saya berikan link download.
- Kemudian sertakan kedalam script HTML anda dengan menggunakan tag link
<link rel="stylesheet" href="animate.css" />
- Setelah itu anda hanya menambahkan class animated dan nama animasi yang sudah tersedia. Misalnya pada contoh di bawah ini saya memberikan efek animasi wobble, pada sebuah tag div, untuk lebih jelas lihat script di bawah ini :
<div class="animated wobble">Animate CSS</div>
- Maka akan diperoleh hasil tulisan Animate CSS yang bergerak kekanan dan ke kiri secara bergantian.
Untuk merubah durasi, delay dan perulangan pada animasi anda bisa menambahkan style CSS seperti script di bawah ini :
div{
-moz-animation-duration: 2s;
-moz-animation-delay:4s;
-moz-animation-iteration-count: infinite;
}
agar compatible dengan semua browser silahkan tambahkan pada masing - masing style vendor - vendor -webkit, -ms dan -o. Mudah bukan untuk membuat animasi dengan Animate CSS.? silahkan langsung dipraktekan agar anda bisa melihat hasilnya.Selamat Mencoba