Kombinasi HTML, CSS3 Dan Javascript Bagian 3

Seperti janji saya sebelumnya pada postingan kali ini kita akan bermain dengan animasi css serta mengkombinasikannya dengan javascript. Pada postingan kali ini saya akan membahas tentang cara penggunaan keyframes untuk menganimasikan objek.

Animasi pada CSS3 biasanya di deklarasikan menggunakan property animation, setiap animasi dapat dijadikan satu menggunakan keyframes. Seperti layaknya pada beberapa software animasi 3D dimana setiap pergerakan objek memiliki keyframes.

Move To Right Animation (Animasi Bergerak Ke Kanan)

Sekarang kita akan mencoba menggerakan sebuah objek HTML dari posisi awal menuju posisi bagian kanan. terdapat beberapa cara untuk membuat animasi ini kita dapat mengubah margin/padding dari objek atau kita juga dapat mengubah posisi dari objek tersebut. Disini saya menggunakan posisi objek dengan property left, perlu diingat bahwa ketika kita ingin menggunakan property left,right,top atau bottom kita harus terlebih dahulu mendeklarasikan properti position jika tidak maka properti yang Anda deklarasikan tidak akan dieksekusi.
berikut contoh animasi CSS3 menggunakan keyframes yang bergerak ke kanan.

button{
  position:relative;
  display:block;
  margin:10px auto;
}
@keyframes ltr {
  0% {
    left:0px;
  }
  50% {
    left:70px;
  }
  100% {
    left:0px;
  }
}

Pada CSS diatas saya membuat keyframes yang saya beri nama ltr dan terdapat 3 keyframes dimana saya hanya mengubah posisi left dari objek dimana objek yang saya gunakan adalah sebuah button. Ada 2 Cara dalam menggunakan keyframes yaitu menggunakan persentasi atau menggunakan from dan to. Namun disini saya hanya membahas yang menggunakan persen. Pada keyframes kedua objek digerakkan 70px ke kanan, kemudian pada keyframes ketiga objek dikembalikan ke posisi semula.

Untuk mengimplementasikan animasi tersebut ke sebuah objek kita perlu menambahkan properti animation pada objek yang akan kita animasikan, terdapat 2 cara, membuat class baru di CSS atau menambahkannya pada attribut style di sebuah objek HTML. Namun dalam kasus ini saya memakai cara yang kedua yaitu menambahkan properti animation pada attribut style.

Pertanyaan yang ada di benak Anda mungkin adalah "Lalu, bagaimana cara melakukannya ?" untuk melakukannya kita akan menggunakan javascript, javascript sangat berguna untuk membuat website menjadi lebih responsive, banyak situs-situs besar seperti misalnya Twitter yang memiliki framework bootstrap, kemudian jQuery dan jQuery Mobile serta masih banyak lagi framework javascript lainnya.

Lanjut ke pembahasan, jadi untuk menambahkan properti animation kita memerlukan javascript terutama apabila kita ingin memicu animasi pada kondisi tertentu, misal saat objek diklik atau saat objek menyentuh kursor mouse dan lain sebagainya. disini saya akan memicu animasi saat objek menyentuh kursor mouse. Untuk mengakses objek menggunakan javascript kita dapat menggunakan id, class atau tag dari objek tersebut, jadi jika Anda ingin mengubah suatu objek dengan tag yang sama maka ada baiknya Anda menggunakan class atau id agar objek tidak mengeksekusi perintah yang sama. Disini saya memberikan id btn pada objek yang akan diubah.

var tombol = document.getElementById('btn');
tombol.onmouseover = function(){
   tombol.setAttribute("style","animation: ltr 2s");
}
setTimeout(function() {
   tombol.removeAttribute("style");
}, 2000);

Saya akan sedikit menjelaskan tentang script diatas melalui tabel berikut

tombol	Variabel yang kita buat untuk mengakses objek yang akan diberikan animasi
document	Representasi halaman HTML
onmouseover	Event yang kita gunakan untuk memicu pengubahan attribute pada objek yaitu saat kursor mouse menyentuh objek tersebut
setAttribute("style","animation: ltr 2s")	fungsi yang digunakan untuk menambahkan attribute pada objek dimana parameter pertama adalah nama attribute sedangkan parameter kedua adalah value dari attribute dimana terdapat 2 argument, nama keyframes dan lama waktu animasi
setTimeout	Digunakan untuk mengeksekusi suatu perintah setelah kurun waktu tertentu

Pada script diatas saya menggunakan setTimeout untuk menghapus attribute style setelah animasi telah selesai, tujuannya adalah agar saat event onmouseover dipicu kembali objek akan tetap dianimasikan. Untuk membuat animasi yang bergerak dari Kanan ke Kiri Anda hanya perlu mengubah properti left pada keyframes menjadi right

Full Code

Rotate Animation(Animasi Berputar)

Untuk membuat animasi berputar tidak berbeda jauh dengan animasi sebelumnya, yang berbeda hanya pada keyframes nya saja dimana pada keyframes saya menggunakan property transform kemudian memutar objek pada sumbu Z sebanyak 360 derajat.

Move To Bottom Animation(Animasi Bergerak Ke Bawah)

Animasi ini hampir sama seperti yang pertama, perbedaannya hanya pada properti left dimana saya mengubahnya menjadi top.




Itu tadi 3 variasi animasi yang dapat digunakan untuk menganimasikan objek HTML di web Anda. Bagaimana ? mudah bukan ? tidak ada yang sulit selama Anda mau belajar :). Untuk hasil akhir dapat dilihat disini

Semoga bermanfaat ...!!