Property Transition Pada CSS3

Property Transition Pada CSS3 – Salah satu property CSS3 yang punya fungsi dan kegunaan luar biasa keren adalah transition. Property CSS3 transition ini memiliki fungsi yang memungkinkan kita dapat mengubah dan memodifikasi secara halus elemen HTML dengan nilai dari properti CSS yang diberikan pada elemen HTML tersebut. Dalam property CSS3 sebenarnya ada 2 property yang fungsinya sama-sama bisa digunakan untuk megubah dan memodifikasi sebuah elemen HTML secara halus dengan nilai property CSS yang diberikan dan pastinya dengan tambahan salah satu dari nilai 2 property tersebut. Kedua property CSS3 tersebut, yaitu transition dan animation.

Property CSS3 transition & animation sama-sama membentuk perubahan elemen HTML yang terjadinya secara halus. Hal yang membedakan kedua property CSS3 tadi adalah bahwa buat menggunakan transition selalu terdapat keadaan awal & keadaan akhir. Sedangkan buat property CSS3 animation sama-sama memiliki keadaan awal dan keadaan akhir, tetapi pada antara keadaan awal & akhir masih ada 1 atau lebih keadaan lain. Biasanya terdapat beberapa keadaan sesudah keadaan awal. Beberapa keadaan diantara keadaan awal & akhir itu yg dianggap dengan keyframe.

Konsep konvoi dari ke 2 property CSS3 transition & animation dianggap menggunakan transisi atau animasi. Jadi yang membedakannya hanya property CSS3 serta metode keadaan pada ke 2 property CSS3 tadi. Sehingga jika hanya terdapat keadaan awal & akhir kita menggunakan property CSS3 transition. Tetapi jika ada beberapa keyframe pada antara keadaan awal dan akhir, kita memakai property CSS3 animation.

Untuk menggunakan property CSS3 transition, kita membutuhkan 4 parameter yang mampu kita tulis pada satu baris kode sintak property CSS3 transition, yaitu : property, durasi, fungsi, dan delay. Untuk parameter durasi adalah parameter yg wajib buat ditulis, sedangkan buat 3 parameter lainnya merupakan parameter optional. Property CSS3 transition selalu ditulis pada style atau CSS di keadaan awal.

1. Durasi

Durasi adalah parameter wajib yang ditulis pada baris kode property CSS3 transition. Durasi digunakan untuk menentukan berapa lama suatu elemen HTML berubah dari keadaan awal ke keadaan akhir. durasi bisa ditulis dengan angka yang memiliki satuan s / ms. s sama dengan second, sedangkan ms sama dengan millisecond atau seperseribu detik. Silakan lihat untuk contoh penulisan baris sintaknya berikut di bawah ini:

			<!DOCTYPE html> <html lang="en"> <head> 	<meta charset="UTF-8"> 	<title>Transition</title> 	<style> 		.kotak { 			width: 200px; 			height: 200px; 			margin: 50px auto; 			background-color: olive; 			transition: 2s; 		} 		.kotak:hover { 			transform: rotate(180deg); 			background-color: orange; 		} 	</style> </head> <body> 	<div class="kotak"></div> </body> </html>

2. Property

Parameter property dalam penulisan sintak property CSS3 transition berfungsi buat menentukan property apa saja yg akan diberikan transition. Pada waktu CSS diberikan property CSS3 transition, CSS akan melihat perubahan apa saja yang akan dilakukan. Secara default, jika kita tidak memilih atau menuliskan property apa saja yang ingin diberi transition, maka CSS membacanya bahwa semua property akan ditransisikan. Ada tiga cara menuliskan parameter property ini:

→ all

ini adalah parameter default. Artinya bila tidak dituliskan pada baris kode property CSS3 transition, maka akan berperilaku memberi transition dalam semua property yg ada dalam keadaan akhir. Atau kita jua sanggup menuliskan all sebelum parameter durasi, buat menekankan bahwa kita akan menaruh transition dalam property CSS3 pada keadaan akhir.

			<!DOCTYPE html> <html lang="en"> <head> 	<meta charset="UTF-8"> 	<title>Transition</title> 	<style> 		.container { 			width: 700px; 			margin: 50px auto; 			border: 3px double green; 			padding: 10px; 		} 		.kotak { 			width: 200px; 			height: 200px; 			background-color: olive; 			transition: all 2s; 		} 		.container:hover .kotak { 			transform: rotate(180deg); 			margin-left: 500px; 			background-color: orange; 		} 	</style> </head> <body> <div class="container"> 	<div class="kotak"></div> </div> </body> </html>

→ <Nama property>

Penulisan parameter property kita sanggup saja menuliskan property eksklusif yg ingin kita transisikan. Contoh buat sintak pada atas, bila kita ingin mentransisikan property margin-left saja. Maka nanti kotak tadi akan beranjak menurut kiri ke kanan secara halus. Sedangkan buat property CSS transform dan background-color akan berubah secara instant. Silakan lihat sintaknya dibawah ini :

			<style>		 		.kotak { 			width: 200px; 			height: 200px; 			background-color: olive; 			transition: margin-left 2s; 		} </style>

→ None

Penulisan parameter property ini kita jua sanggup menulisakan menggunakan nilai none yg merupakan tidak terdapat property CSS pada keadaan akhir yang perlu ditransisikan. Meskipun sporadis sekali nilai none ini kita pakai, akan tetapi tidak terdapat salahnya jikalau kita mengetahui nilai dari parameter property ini. Untuk contoh diatas, jika diberi nilai none, maka buat property CSS transform, margin-left & background-color akan berubah secara instant.

			<style>		 		.kotak { 			width: 200px; 			height: 200px; 			background-color: olive; 			transition: none 2s; 		} </style>

Perlu diketahui, bahwa nir semua property mampu diberi property CSS3 transition atau animation. Untuk itu kita perlu tahu property mana saja yang mampu kita animasikan dan yg tidak mampu kita animasikan. Berikut model-model property yg bisa dianimasikan & yg nir bisa dianimasikan:

● Animatable properties:

background-color, background-position, background-size, border, color, filter, font-size, line-height, top, left, bottom, right, margin, padding, width, height, opacity, transform, word-spacing, letter-spacing, dan lain-lain.

● Non – Animatable Properties:

font-family, display, position, & lain-lain.

3. Fungsi Transisi / Timing Function.

Salah satu parameter optional dalam property CSS3 transition adalah timing function . Parameter ini berfungsi buat memilih jenis konvoi apa yang akan dilakukan waktu terjadi transition. Setiap nilai menurut timing function tidak sama, tergantung berdasarkan kecepatan awal dan kecepatan akhir. Berikut jenis nilai timing function yg sanggup kita pilih.

? Ease adalah nilai default dari parameter timing function. Artinya apabila kita tidak menentukan jenis nilai timing function yg terjadi ketika transition, maka yang akan berlaku timing function jenis ease.

? Ease-in merupakan jenis timing function dimana konvoi awalnya pelan, makin lama makin cepat.

? Ease-out merupakan 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 merupakan jenis timing function dimana konvoi mengatur kecepatannya seimbang searah garis lurus.

? Cubic-bezier(w, x, y, z) merupakan jenis timing function dimana arah pergerakkannya kita bisa atur dengan menggunakan sebuah kurva yg bisa membentuk sebuah persamaan. Nilai menurut elemen ini kita sanggup atur dengan menggunakan editor pada bagian developer tools-nya eksklusif, selesainya cocok nilainya, baru kita copy-paste di kode editor supaya tetap. Ikuti langkah berikut:

1. Klik kiri, lalu pilih inspect. Bisa jua menggunakan shortcut-nya Ctrl Shift I. Atau sanggup jua berdasarkan customize and control web browser menurut bagian atas sebelah kanan browser yang terdapat icon 3 titik. Lalu kita pilih more tools, berikutnya pilih developer tools.

2. Cari elemennya yang mau pada edit, menggunakan memakai icon pertanda panah yang terdapat pada kotak.

Tiga. Klik cubic-bezier editornya.

4. Silakan buat kombinasi nilai pergerakan yg cocok.

5. Lalu copy-paste pada kode editor agar tetap.

			<!DOCTYPE html> <html lang="en"> <head> 	<meta charset="UTF-8"> 	<title>Transition</title> 	<style> 		.container { 			width: 900px; 			margin: 50px auto; 			border: 3px double green; 		} 		.kotak { 			margin: 10px; 			text-align: center; 			line-height: 200px; 			font-size: 20px; 		} 		.kotak1 { 			width: 200px; 			height: 200px; 			background-color: olive; 			transition: all 2s ease; 		} 		.kotak2 { 			width: 200px; 			height: 200px; 			background-color: olive; 			transition: all 2s ease-in; 		} 		.kotak3 { 			width: 200px; 			height: 200px; 			background-color: olive; 			transition: all 2s ease-out; 		} 		.kotak4 { 			width: 200px; 			height: 200px; 			background-color: olive; 			transition: all 2s ease-in-out; 		} 		.kotak5 { 			width: 200px; 			height: 200px; 			background-color: olive; 			transition: all 2s linear; 		} 		.kotak6 { 			width: 200px; 			height: 200px; 			background-color: olive; 			transition: all 2s cubic-bezier(0.29,-0.43, 0.7, 1.41); 		} 		.container:hover .kotak { 			transform: rotate(180deg); 			margin-left: 700px; 			background-color: orange; 		} 	</style> </head> <body> <div class="container"> 	<div class="kotak kotak1">ease</div> 	<div class="kotak kotak2">ease-in</div> 	<div class="kotak kotak3">ease-out</div> 	<div class="kotak kotak4">ease-in-out</div> 	<div class="kotak kotak5">linear</div> 	<div class="kotak kotak6">cubic-bezier</div> </div> </body> </html>

4. Delay

Delay merupakan parameter optional pada property CSS3 transition yg kegunaannya untuk memberikan saat tunggu sebelum menjalankan sebuah transition. Satuan yang digunakan sama seperti dengan durasi. Jadi bila pada satu baris kode, ada dua durasi. Durasi yg terdapat pada depan pasti durasi buat melakukan transisi, sedangkan durasi yang selanjutnya atau ada dibelakang merupakan untuk delay. Satuannya kita sanggup pakai s ( second ) dan ms ( millisecond ). Jadi waktu kita ingin memakai dua durasi ini, perhatikan perhitungan waktunya. Perhatikan model sintak dibawah ini. Transition akan dilakukan sesudah menunggun delay 3s.

			<!DOCTYPE html> <html lang="en"> <head> 	<meta charset="UTF-8"> 	<title>Transition</title> 	<style> 		.container { 			width: 900px; 			margin: 50px auto; 			border: 3px double green; 		} 		.kotak { 			width: 200px; 			height: 200px; 			background-color: olive; 			transition: 2s 3s; 		} 		.container:hover .kotak { 			transform: rotate(180deg); 			margin-left: 700px; 			background-color: orange; 		} 	</style> </head> <body> <div class="container"> 	<div class="kotak"></div> </div> </body> </html>

Untuk penggunaan nilai transition, kita sanggup menggunakan multiple nilai. Contohnya waktu kita ingin mengatur setiap property yg ingin diberi transition berubah dengan durasi dan delay yg tidak sinkron. Perhatikan sintak dibawah ini :

			<!DOCTYPE html> <html lang="en"> <head> 	<meta charset="UTF-8"> 	<title>Transition</title> 	<style> 		.container { 			width: 900px; 			margin: 50px auto; 			border: 3px double green; 		} 		.kotak { 			width: 200px; 			height: 200px; 			background-color: olive; 			transition: margin-left 3s, transform 3s 3s, background-color 3s 2s; 		} 		.container:hover .kotak { 			transform: rotate(180deg); 			margin-left: 700px; 			background-color: orange; 		} 	</style> </head> <body> <div class="container"> 	<div class="kotak"></div> </div> </body> </html>

Finally done buat catatan aku tentang transition. Semoga berguna khususnya buat aku dan pula sahabat-teman yg baru belajar web design.

Dibawah ada source code buat transition yg sanggup dipakai menjadi ide buat design website. Silakan download jika membutuhkan.

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