Mengenal Animate.CSS Dan Cara Menggunakanya - Salah satu fitur dari CSS3 adalah animation/animasi. Dengan animasi halaman web akan menjadi lebih interaktif dan indah. Maka dari itu penggunaan animasi sudah digunakan di kebanyakan web modern.
Untuk menggunakan animasi kalian harus mempelajari syntaxnya, dan memang cukup sulit untuk melakukanya. Maka dari itu kita dapat menggunakan sebuah library dalam penggunaanya, salah satu yang populer adalah Animate.css. Berikut informasi lebih lengkapnya.
Mengenal Animate.CSS
Animate.css adalah sebuah library siap pakai yang dibuat oleh Dan Eden. Animate.css menggabungkan property-property yang digunakan untuk animasi dalam CSS, seperti Transition, Transformation, maupun Animation. Semua dikemas dalam bentuk class di sebuah file css, jadi anda tidak perlu repot repot membuat animasi, anda hanya perlu memanggil nama animasi dalam elemen html.Animate.css juga merupakan library css terpopuler saat ini, saya sendiri juga sering memakainya. Selain mudah library ini juga gratis.
Cara Penggunaan
- Pertama, download library animate.css Disini
- Kemudian, masukan file css ke dokumen html dengan tag link, didalam <head></head>
<link rel="stylesheet" type="text/css" href="main.css"> -
Lalu tambahkan class animated dan nama animasinya pada elemen html. Misal saya akan menambahkan animasi memutar pada sebuah div, berikut syntaxnya.
<div class="shake animated"></div> -
Hasilnya
Itulah ulasan singkat saya mengenai library animate.css, semoga dapat memudahkan kamu dalam membuat halaman web.
Sekian postingan saya yang berjudul Mengenal Animate.CSS Dan Cara Menggunakanya.
Jangan lupa baca postingan saya sebelmunya Mengenal Property Transition Pada CSS3
0 komentar:
Posting Komentar