Memanfaatkan Css Animasi Dan Transisi [Part 1]

23 views

Salam dahsyat, teman Jagocoding.. Di tutorial saya kali ini, kita akan banyak berguru salah satu kepingan dari CSS3 yang paling asik,, yaitu transition dan animation. Transition dan Animation ini memiiki fungsi yang nggak jauh berbeda, yaitu menciptakan suatu efek bergerak pada sebuah elemen HTML.

Pada dasarnya, transition dan animation ini mempunyai 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 proteksi kursor dengan event tertentu (klik, mengarahkan, atau fokus) ke elemen yang bersangkutan biar sanggup berjalan.
Berbeda dengan animation yang bisa berjalan sendiri tanpa proteksi event khusus, bahkan sanggup dilakukan juga secara berulang-ulang.  Kalau begitu, eksklusif kita coba saja ya. 😀

 

Pertama-tama, kita buat dulu sebuah layer div dengan class transisi dan animasi.

<div class="transisi">Ini yakni sebuah transisi</div><div class="animasi">Ini yakni sebuah animasi</div>

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 menyerupai ini :

Langkah selanjutnya yakni memilih perubahan apa saja yang ingin dilakukan pada elemen tersebut? Misalnya pada kepingan transisi saya ingin lebarnya jadi 300px, backgroundnya jadi merah, dan warna goresan pena menjadi putih. Artinya, elemen yang perlu diubah yakni 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 proteksi pseudo class hover. Dalam kasus lain, pseudo class lainnya menyerupai focus bisa digunakan juga.
Transisi masih belum selesai hingga disini,, bila barusan kita gres menciptakan perubahan apa saja yang ingin dilakukan, kini tinggal memanggil sintaks transition untuk benar-benar menjalankannya. Sintaks transition dipanggil di class normal yang tidak ada pseudo classnya (.transisi). 

Cara pemanggilannya yakni :

transition : property durasi;
transition : property durasi, property durasi, property durasi, ….. ;  <– kalau property yang ingin diubah ada lebih dari 1 dipisah dengan tanda koma.

property yakni nama perintah yang ingin diberikan efek transisi, durasi yakni usang 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 sebab transition ini CSS3, jangan lupa dibuatkan juga prefix -moz- untuk mozilla jadul, -o- untuk opera jadul, dan -webkit- untuk chrome dan safari jadul. 😀
Kalau dicoba, akhirnya nanti kita akan melihat efek transisi dengan hasil final menyerupai ini dikala mengarahkan kursor:

Transitionnya cukup segitu aja penjelasannya.. pengembangannya itu biasa dilakukan di kepingan propertynya aja.. kalo tadi saya cuma pola width, background dan color, transition juga bisa diterapkan di aneka macam property lain menyerupai top, left, right, bottom, margin, padding, text-indent, background-position, transform, dan sebagainya …….

 

Sekarang kita akan masuk ke animation. Kalau transition tadi membutuhkan proteksi nama komponen yang sama dengan pseudo classnya, animation ini membutuhkan 1 perintah embel-embel 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, sebab 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 gres memilih titik awal animasi yang diwakili perintah from, dan titik final animasi yang diwakili perintah to.Sama menyerupai transition, kita bisa mendefinisikan property apapun dan sebanyak apapun di kepingan ini. Kalau di transition tadi tanpa pemisahnya koma ( , ), di animasi ini tanda pemisahnya yakni semi colon ( ; ).

Setelah keyframes selesai dibuat, kini kita gres meletakkan perintah animasi di komponen yang ingin kita berikan animasi.

.animasi{/*perintah2 usang 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 menciptakan 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 menyerupai transition, property di kepingan @keyframes bisa kita isi seenak jidat kita tergantung kebutuhan.

Di kepingan selanjutnya nanti kita masih berguru dengan animation, tapi dengan kondisi yang jauh lebih dinamis dari yang kini ini. Terima kasih untuk perhatiannya..

Author: 
    author
    No related post!