Property Animation Pada CSS3

Property Animation Pada CSS3 – Pada CSS3 kita bisa membuat animasi dengan menggunakan property CSS3 transition dan property CSS3 animation. Untuk membuat animasi dengan menggunakan property CSS3 transition kita membutuhkan keadaaan awal dan keadaan akhir. Hanya 2 keadaan ketika kita menggunakan property CSS3 transition. Sedangkan dengan menggunakan property CSS3 animation kita bisa membuat animasi dengan beberapa keadaan di dalam keadaan awal dan akhir. Perhatikan gambar dibawah ini.

Untuk membuat animasi dengan menggunakan property CSS3 animation. Kita harus menggunakan sintak kode CSS seperti yang tampak pada gambar dibawah. Sintak kode css tersebut bisa dituliskan di bagian mana saja dalam file CSS. Sintak kode CSS tersebut juga tidak memerlukan selector. Kita cukup menuliskan keyword @keyframes diikuti dengan nama animasi yang bisa kita buat namanya bebas. Kemudian di dalam @keyframes tersebut, kita bisa tuliskan beberapa keadaan. Kalau hanya 2 keadaan, kita bisa tulis from untuk keadaan awal. Dan to untuk keadaan akhir. From nilainya bisa kita ubah menjadi 0%, sedangkan to nilainya bisa kita ubah menjadi 100%. Penggunaan nilai from dan to dengan menggunakan presentase akan sangat dibutuhkan ketika kita ingin membuat animasi dengan beberapa keadaan atau banyak keyframes. Seperti kita membuat keadaan pada 0%, 20%, 50%, 60% sampai dengan 100% di keadaan akhir.

Untuk memakai property CSS3 animation ini, pertama kita buat dulu animasinya dengan memakai sintak kode CSS keyframes. Selanjutnya step ke 2 kita baru pakai pada selector yg ingin kita beri animasi. Untuk lebih jelas, silakan lihat model baris kode CSS dibawah gambar berikut:

Sintak Keyframe

			
				<!DOCTYPE html> <html lang="en"> <head> 	<meta charset="UTF-8"> 	<title>Animation</title> 	<style> 		.kotak { 			width: 200px; 			height: 200px; 			background-image: linear-gradient(to right, yellow 20%, pink, salmon, pink, chartreuse 80%); 		} 		.kotak:hover { 			animation: kotakGradient 2s; 		} 		@keyframes kotakGradient { 			from { 				width: 200px; 			} 			to { 				width: 400px; 			} 		} 	</style> </head> <body> 	<div class="kotak"></div> </body> </html>

Untuk penulisan sintak CSS Animation, kita mampu menuliskannya seperti pada gambar dibawah ini. Ada dua cara, kita mampu menggunakan shorthand-nya, bila kita sudah paham benar bagaimana cara menggunakan satu persatu parameter seperti model di bawah penulisan shorthand. Ada 8 parameter nilai yg sanggup kita tulis pada sintak CSS3 animation ini. 2 yang harus yaitu name & duration. Sedangkan buat 6 parameter lainnya optional, yaitu : timing-function, delay, iteration-count, direction, fill-mode, dan play-state. Untuk masing-masing penjelasan parameter nilai menurut sintak CSS3 animation ini, silakan lihat penjelasannya di bawah gambar berikut.

1. N ame

Name adalah parameter yang harus diisi sebagai nilai dari property CSS3 animation ini. Untuk anugerah nama bebas, asal sesuai dan sama menggunakan penggunaan nama dalam @keyframes.

2. D uration

Durasi merupakan parameter wajib yg ditulis dalam baris kode property CSS3 animation. Durasi digunakan buat memilih berapa usang suatu elemen HTML berubah dalam beberapa keadaan dari awal hingga keadaan akhir. Durasi sanggup ditulis dengan nomor yg memiliki satuan s / ms. S sama dengan second, sedangkan ms sama menggunakan millisecond atau seperseribu detik.

3. T iming F unction

Salah satu parameter optional pada property CSS3 animation merupakan timing function. Parameter ini berfungsi untuk memilih jenis konvoi apa yang akan dilakukan ketika terjadi animasi. Setiap nilai berdasarkan timing function tidak sama, tergantung menurut kecepatan awal & kecepatan akhir. Berikut jenis nilai timing function yg sanggup kita pilih.

● e ase adalah nilai default dari parameter timing function. Artinya apabila kita tidak menentukan jenis nilai timing function yang terjadi saat transition, maka yang akan berlaku timing function jenis ease.

● ease-in adalah jenis timing function dimana pergerakan awalnya pelan, makin lama makin cepat.

● ease-out adalah jenis timing function dimana pergerakan awalnya cepat, makin lama makin lambat.

● ease-in-out adalah jenis timing function dimana pergerakannya merupakan kombinasi ease-in dan ease-out.

● linear adalah jenis timing function dimana pergerakan mengatur kecepatannya seimbang searah garis lurus.

● cubic-bezier(w, x, y, z) adalah jenis timing function dimana arah pergerakkannya kita bisa atur dengan menggunakan sebuah kurva yang bisa menghasilkan sebuah persamaan. Nilai dari elemen ini kita bisa atur dengan menggunakan editor pada bagian developer tools-nya langsung, setelah cocok nilainya, baru kita copy-paste di kode editor agar permanen. Ikuti langkah berikut:

? Klik kiri, lalu pilih inspect. Bisa juga menggunakan shortcut-nya Ctrl Shift I. Atau bisa juga menurut customize and control web browser dari permukaan sebelah kanan browser yang terdapat icon 3 titik. Lalu kita pilih more tools, berikutnya pilih developer tools.

? Cari elemennya yang mau pada edit, menggunakan menggunakan icon tanda panah yg terdapat dalam kotak.

? Klik cubic-bezier editornya.

? Silakan untuk kombinasi nilai pergerakan yg cocok.

? Lalu copy-paste pada kode editor supaya tetap.

4. D elay

Delay adalah parameter optional pada property CSS3 transition yg fungsinya buat menaruh saat tunggu sebelum menjalankan sebuah transition. Satuan yg digunakan sama misalnya dengan durasi. Jadi jikalau pada satu baris kode, ada 2 durasi. Durasi yang terdapat pada depan pasti durasi untuk melakukan transisi, sedangkan durasi yang selanjutnya merupakan untuk delay. Satuannya kita sanggup pakai s ( second ) dan ms ( millisecond ). Jadi saat kita ingin menggunakan 2 durasi ini, perhatikan perhitungan waktunya.

5. I teration C ount

Parameter iteration count berfungsi buat menentukan berapa kali pengulangan. Kita sanggup memakai angka atau keyword menggunakan nilai ?Infinite? Jika animasi yang ingin dilakukan terus menerus berulang. Defaultnya 1x pengulangan, apabila kita nir menentukan berapa jumlah iteration count-nya. Kita mampu menggunakan angka 1, dua, 3, 4, 10, ? & tak terhingga atau nilai dengan keyword infinite buat berkreasi dengan menggunakan property CSS3 animation ini.

6. D irection

Direction adalah parameter untuk mengatur arah pergerakan animasi. Apabila kita nir memilih parameter nilai tersebut, maka nilai yg berlaku buat parameter ini merupakan normal, yg ialah akan beranjak berdasarkan awal ke akhir. Ada beberapa nilai yg sanggup dipakai buat parameter direction ini, yaitu menjadi berikut :

● normal adalah nilai default dari parameter direction ini, arah pergerakannya dari awal ke akhir.

● r everse adalah nilai yang arah pergerakan animasinya dari akhir ke awal. Nilai parameter reverse adalah kebalikan dari nilai normal, sebagai nilai defaultnya.

● alternate adalah nilai yang arah pergerakannya merupakan kombinasi atau berganti-ganti, tapi arah jalan pergerakannya tetap dari posisi awal. Jadi pergerakannya dari awal ke akhir, kemudian dari akhir ke awal, kemudian dari awal ke akhir, dan berganti-ganti seperti itu terus sampai berapa banyak nilai parameter iteration-count yang ditentukan. Pergerakan dengan kombinasi ini adalah pergerakan yang paling natural.

● alternate-reverse adalah arah pergerakan yang berkebalikan dengan nilai alternate. Apabila menggunakan pergerakan dengan nilai alternate-reverse, maka kombinasi pergerakkannya dimulai dari akhir. Jadi pergerakannya dari akhir ke awal, kemudian dari awal ke akhir, kemudian dari akhir ke awal, dan berganti-ganti seperti itu terus sampai berapa banyak nilai parameter iteration-count yang ditentukan.

7. F ill M ode :

Fill mode merupakan parameter buat memilih akhir berdasarkan animasi terjadi. Jika nir ditentukan maka nilai defaultnya adalah none, yang adalah animasi berakhir dalam posisi awal. Ada beberapa nilai dari parameter fill mode yang mampu dipakai. Nilai tadi sebagai berikut:

● None adalah nilai default dari parameter fill mode dimana animasi akan berakhir pada posisi awal.

● forwards adalah nilai dari fill mode dimana animasi akan berakhir pada posisi akhir animasi. Jadi apabila kita tidak ingin animasinya langsung loncat ke awal, kita bisa menggunakan nilai forwards untuk parameter fill-mode.

● backwards adalah nilai dari fill mode dimana animasi akan berakhir pada posisi awal.

● Both adalah nilai fill mode dimana animasi akan berakhir pada posisi akhir ulangan baik itu di awal atau di akhir.

8. Play S tate

Parameter nilai play state terdapat 2 jenis yg sanggup digunakan, yaitu : running dan paused. Secara default animasi yang terjadi apabila nilai parameter tidak dipengaruhi, maka nilainya adalah running. Jika kita memakai nilai paused, maka animasinya otomatis tidak akan jalan. Biasanya buat penggunaan paused kita gunakan dengan javascript, misalnya buat menghentikan animasi ditengah jalan.

Untuk penggunaan nilai menurut parameter-parameter pada property CSS3 animation pada atas. Silakan lihat contoh sintak dibawah ini, agar lebih kentara.

			<!DOCTYPE html> <html lang="en"> <head> 	<meta charset="UTF-8"> 	<title>Animation</title> 	<style> 		.kotak { 			width: 200px; 			height: 200px; 			background-image: linear-gradient(to right, yellow 20%, pink, salmon, pink, chartreuse 80%); 			animation: kotakGradient 3s ease-in 5 alternate forwards running; 		} 		@keyframes kotakGradient { 			0% { 				width: 200px; 			} 			50% { 				width: 400px; 				height: 200px; 			} 			100% { 				width: 400px; 				height: 400px; 			} 		} 	</style> </head> <body> 	<div class="kotak"></div> </body> </html>

Finally done buat catatan aku mengenai property CSS3 animation. Semoga sanggup bermanfaat buat diri aku sendiri khususnya. Dan tentu saja buat teman-sahabat yg saat ini sedang belajar mengenai web design.

Dibawah terdapat source code buat contoh penerapan property CSS3 animation. Jika ada yg membutuhkan silakan download saja buat source codenya. Siapa tahu bisa menaruh ide buat karya sahabat-teman pada bidang web design.

Happy blogging guys ???????? ......