Memanfaatkan CSS Animasi dan Transisi [Part 1] Oleh: Christian Rosandhy
Transition dan Animation itu adalah salah satu perintah wajib di dunia CSS3 sekarang untuk menghasilkan web yang lebih unik. Di part pertama ini kita akan belajar perbedaan, fungsi, dan sedikit konsep dasar transisi dan animasi.
Salam dahsyat, sobat Jagocoding.. Di tutorial saya kali ini, kita akan banyak belajar salah satu bagian dari CSS3 yang paling asik,, yaitu transition dan animation. Transition dan Animation ini memiiki fungsi yang nggak jauh berbeda, yaitu membuat suatu efek bergerak pada sebuah elemen HTML. Pada dasarnya, transition dan animation ini memiliki fungsi yang sama. Akan tetapi, transition biasanya digunakan hanya untuk animasi yang sifatnya lebih sederhana atau 1 arah. Transisi ini tidak bisa berjalan seorang diri, melainkan membutuhkan bantuan kursor dengan event tertentu (klik, mengarahkan, atau fokus) ke elemen yang bersangkutan supaya dapat berjalan. Berbeda dengan animation yang mampu berjalan sendiri tanpa bantuan event khusus, bahkan dapat dilakukan juga secara berulang-ulang. Kalau begitu, langsung kita coba saja ya. :D
Pertama-tama, kita buat dulu sebuah layer div dengan class transisi dan animasi.
Ini adalah sebuah transisi
Ini adalah sebuah animasi
Setelah itu kita buat desain yang sederhana saja dulu untuk masing-masing class ini. Untuk membedakannya, warna class transisi dan animasi dibedakan saja.. /*buat saja div bebas sembarangan yang berbeda*/ .transisi{ width:200px; height:200px; background:#ffcc00; color:#202020; } .animasi{ width:100px; height:100px; background:#aaff00; color:#112200; }
Hasil awalnya masih seperti ini :
Langkah selanjutnya adalah menentukan perubahan apa saja yang ingin dilakukan pada elemen tersebut? Misalnya pada bagian transisi saya ingin lebarnya jadi 300px, backgroundnya jadi merah, dan warna tulisan menjadi putih. Artinya, elemen yang perlu diubah adalah width, background-color, dan color. Kita buat dengan perintah berikut ini. .transisi:hover{ width:300px; background-color:#f00; color:#fff; } Seperti yang kita lihat, efek transisi disini membutuhkan bantuan pseudo class hover. Dalam kasus lain, pseudo class lainnya seperti focus bisa dipakai juga. Transisi masih belum selesai sampai disini,, kalau barusan kita baru membuat perubahan apa saja yang ingin dilakukan, sekarang tinggal memanggil sintaks transition untuk benar-benar menjalankannya. Sintaks transition dipanggil di class normal yang tidak ada pseudo classnya (.transisi). Cara pemanggilannya adalah : transition : property durasi; transition : property durasi, property durasi, property durasi, ..... ; <-- kalau property yang ingin diubah ada lebih dari 1 dipisah dengan tanda koma.
property adalah nama perintah yang ingin diberikan efek transisi, durasi adalah lama animasi yang berjalan dalam satuan detik (s). transition:background-color 1s, width 1s, color 1s; /*karena ini CSS3, browser jadul butuh sedikit prefix*/ -moz-transition:background-color 1s, width 1s, color 1s; -o-transition:background-color 1s, width 1s, color 1s; -webkit-transition:background-color 1s, width 1s, color 1s; Nah,, transition itu memang cuma segitu aja.. Tapi karena transition ini CSS3, jangan lupa dibuatkan juga prefix -moz- untuk mozilla jadul, -o- untuk opera jadul, dan -webkit- untuk chrome dan safari jadul. :D Kalau dicoba, hasilnya nanti kita akan melihat efek transisi dengan hasil akhir seperti ini ketika mengarahkan kursor:
Transitionnya cukup segitu aja penjelasannya.. pengembangannya itu biasa dilakukan di bagian propertynya aja.. kalo tadi saya cuma contoh width, background dan color, transition juga bisa diterapkan di berbagai property lain seperti top, left, right, bottom, margin, padding, text-indent, background-position, transform, dan sebagainya .......
Sekarang kita akan masuk ke animation. Kalau transition tadi membutuhkan bantuan nama komponen yang sama dengan pseudo classnya, animation ini membutuhkan 1 perintah tambahan lagi yaitu @keyframes. Perintah @keyframes inilah yang akan mendefinisikan langkah animasi sebuah komponen, dan perintah animation nanti yang akan menjalankannya. Sekarang kita buatkan
dulu alur animasinya ya.. @keyframes nama_animasi{ from {background:#000; color:#fff;} to {background:#fff; color:#000;} } /*jangan lupa, karena ini css3, kasi prefix moz o webkit dan ms utk browser jadul..*/ @-webkit-keyframes nama_animasi{ from {background:#000; color:#fff;} to {background:#fff; color:#000;} } @-moz-keyframes nama_animasi{ from {background:#000; color:#fff;} to {background:#fff; color:#000;} } @-o-keyframes nama_animasi{ from {background:#000; color:#fff;} to {background:#fff; color:#000;} } @-ms-keyframes nama_animasi{ from {background:#000; color:#fff;} to {background:#fff; color:#000;} } dalam keyframes ini pertama-tama kita mendefinisikan nama animasinya. sebagai contoh, keyframes saya beri nama nama_animasi. Setelah itu kita baru menentukan titik awal animasi yang diwakili perintah from, dan titik akhir animasi yang diwakili perintah to.Sama seperti transition, kita bisa mendefinisikan property apapun dan sebanyak apapun di bagian ini. Kalau di transition tadi tanpa pemisahnya koma ( , ), di animasi ini tanda pemisahnya adalah semi colon ( ; ). Setelah keyframes selesai dibuat, sekarang kita baru meletakkan perintah animasi di komponen yang ingin kita berikan animasi. .animasi{ /*perintah2 lama tadi*/ ... animation: nama_animasi 1s; /*untuk browser jadul*/ -moz-animation: nama_animasi 1s; -o-animation: nama_animasi 1s; -webkit-animation: nama_animasi 1s; -ms-animation: nama_animasi 1s; } Sekarang, coba jalankan, dan lihat yang terjadi.
Nah,, ternyata layer animasi berjalan dengan sendirinya.. Sayangnya cuma berjalan 1 kali ya.. Kita bisa membuat animasi ini berjalan sendiri dengan otomatis secara berulang-ulang selama lamanya.. Caranya dengan menambahkan infinite pada masing-masing nilai di animation.
.animasi{ /*sintaks lama*/ ... animation: nama_animasi 1s infinite; /*<- ini nih..*/ -moz-animation: nama_animasi 1s infinite; -o-animation: nama_animasi 1s infinite; -webkit-animation: nama_animasi 1s infinite; -ms-animation: nama_animasi 1s infinite; } Nah,, dengan begitu animasi benar-benar berjalan sendiri sesuai dengan perintah kita. Animation ini pun masih sangat mungkin dikembangkan juga. sama seperti transition, property di bagian @keyframes bisa kita isi seenak jidat kita tergantung kebutuhan. Di bagian selanjutnya nanti kita masih belajar dengan animation, tapi dengan kondisi yang jauh lebih dinamis dari yang sekarang ini. Terima kasih untuk perhatiannya.. :)
Tentang Penulis Christian Rosandhy
