Cara Mudah Buat Animasi di CSS dengan Animate.css
CSS telah meningkat dengan banyak fitur yang membuat pengembangan web jauh lebih menarik dan menantang. Salah satu fitur tersebut adalah efek animasi CSS3. Sebelum CSS3, untuk membuat animasi Anda hanya dapat bekerja dengan Javascript. Tapi sekarang Anda bisa membuatnya dengan mudah dengan CSS3.
Kami telah memandu Anda melalui tutorial yang bagus tentang membuat Bounce Effect dengan CSS3 sebelumnya, dan dalam posting ini saya akan memperkenalkan kepada Anda sebuah perpustakaan yang luar biasa yang akan membuat pembuatan animasi dengan CSS3 menjadi lebih mudah: Animate.css.
Animate.css adalah kumpulan pustaka efek animasi CSS3 yang siap digunakan. Pustaka ini memberi Anda lebih dari 50 efek animasi berbeda yang bekerja secara konsisten di hampir semua browser dengan dukungan CSS3.
Anda kemudian dapat menerapkan animasi pada teks, gambar, formulir, dan sebagainya. Ada juga banyak situs hebat yang menggunakan pustaka ini; Tridiv - editor 3D CSS terbaik di web - adalah salah satunya.
Permulaan
Dengan Animate.css, yang harus Anda lakukan adalah memasukkan kelas yang sesuai dengan elemen Anda. Untuk memulai, pertama-tama sertakan file animate.css ke dalam head. Anda dapat mengunduh perpustakaan lengkap dari halaman repositori Github.
Secara default, Animate.css hanya akan dianimasikan sekali saat halaman pertama dimuat. Ini kemudian akan tetap statis. Untuk dapat mengontrol animasi, kita membutuhkan sedikit Javascript. Dalam hal ini, kami akan menyertakan jQuery ke dalam proyek, seperti itu.
<head>
...
<link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
...
</head>
.
HTML Markup
Untuk menerapkan animasi Anda harus menambahkan kelas .animated ke elemen yang ingin Anda animasikan, bersama dengan nama animasi seperti itu.
<div class="option animated wobble">This text will animate.</div>
Itu dia! Animasi hanya akan diterapkan saat pemuatan halaman, jadi Anda mungkin juga perlu menggunakan Javascript untuk menerapkan animasi pada pemicu peristiwa. Opsi. Juga dapat disesuaikan agar sesuai dengan kebutuhan Anda.
Opsi CSS Tambahan
Animasi yang telah kita tentukan sebelumnya hanya akan berputar sekali dan pada durasi yang telah ditentukan serta waktu tunda juga. Jika Anda memerlukan lebih banyak loop atau durasi yang berbeda atau waktu tunda, berikut cara menyesuaikannya.
Untuk membiarkan animasi berulang beberapa kali atau bahkan tanpa batas, Anda dapat menggunakan atribut animation-iteration-count. Pastikan juga untuk menyertakan prefiks vendor yang berlaku seperti webkit, moz, dll. Untuk membuatnya tidak terbatas, tambahkan infinite sebagai nilainya.
Jika Anda membutuhkannya untuk mengulang hanya beberapa kali, cukup masukkan nilainya dengan jumlah loop yang Anda inginkan.
-vendor-animation-iteration-count: infinite | <number>;
Untuk menyesuaikan durasi, atribut yang sesuai untuk digunakan adalah animasi-durasi; dan itu animasi-penundaan untuk kontrol penundaan. Berikut ini adalah contoh kode opsi.
.option {
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 5;
}
.
Javascript Control
Untuk lebih mengontrol status animasi, kami membutuhkan sedikit bantuan dari Javascript. Misalkan kita menginginkan link teks untuk memicu animasi setelah diklik. Pertama, kita perlu menambahkan referensi ke tautan, seperti itu.
<div class="demo animated">
<p>This text will animate. <a href="" id="ref">Click to animate!</a></p>
</div>
Untuk menggunakan fungsi click, sertakan referensi tautan ke dalamnya.
Dengan Javascript, Anda dapat menentukan nama animasi. Kami akan menggunakan pendekatan dengan membuat fungsi beranimasi, dan memberi nama animasi bersama dengan kelas elemen (dalam kode di atas, kami telah menambahkan atribut demo).
Dan kode Javascriptnya akan seperti berikut.
<script language="javascript">
$(function() {
$("#ref").click(function() {
animate(".demo", 'bounce');
return false;
});
});
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
</script>
Efek animasi, memang, adalah salah satu cara terbaik untuk membuat situs Anda lebih menarik, tetapi ingatlah untuk tidak berlebihan. 