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 dan animation sama-sama menghasilkan perubahan elemen HTML yang terjadinya secara halus. Hal yang membedakan kedua property CSS3 tersebut adalah bahwa untuk menggunakan transition selalu ada keadaan awal dan keadaan akhir. Sedangkan untuk property CSS3 animation sama-sama memiliki keadaan awal dan keadaan akhir, namun di antara keadaan awal dan akhir terdapat 1 atau lebih keadaan lain. Biasanya terdapat beberapa keadaan setelah keadaan awal. Beberapa keadaan diantara keadaan awal dan akhir itu yang disebut dengan keyframe.

Konsep pergerakan dari kedua property CSS3 transition dan animation disebut dengan transisi atau animasi. Jadi yang membedakannya hanya property CSS3 serta metode keadaan dalam kedua property CSS3 tersebut. Sehingga kalau hanya ada keadaan awal dan akhir kita menggunakan property CSS3 transition. Namun kalau ada beberapa keyframe di antara keadaan awal dan akhir, kita menggunakan property CSS3 animation.

menjelaskan property css3 tentang perbedaan transition dan animation

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

menjelaskan masing-masing nilai yang digunakan pada property css3 transition seperti property, durasi, fungsi dan delay

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 pada penulisan sintak property CSS3 transition berfungsi untuk menentukan property apa saja yang akan diberikan transition. Pada saat CSS diberikan property CSS3 transition, CSS akan melihat perubahan apa saja yang akan dilakukan. Secara default, apabila kita tidak menentukan atau menuliskan property apa saja yang ingin diberi transition, maka CSS membacanya bahwa semua property akan ditransisikan. Ada 3 cara menuliskan parameter property ini:

→ all
ini merupakan parameter default. Artinya kalau tidak dituliskan pada baris kode property CSS3 transition, maka akan berperilaku memberi transition pada semua property yang ada pada keadaan akhir. Atau kita juga bisa menuliskan all sebelum parameter durasi, untuk menekankan bahwa kita akan memberikan transition pada property CSS3 di 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 bisa saja menuliskan property tertentu yang ingin kita transisikan. Contoh untuk sintak di atas, apabila kita ingin mentransisikan property margin-left saja. Maka nanti kotak tersebut akan bergerak dari kiri ke kanan secara halus. Sedangkan untuk 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 juga bisa menulisakan dengan nilai none yang artinya tidak ada property CSS pada keadaan akhir yang perlu ditransisikan. Meskipun jarang sekali nilai none ini kita pakai, tapi tidak ada salahnya kalau kita mengetahui nilai dari parameter property ini. Untuk contoh diatas, apabila diberi nilai none, maka untuk property CSS transform, margin-left dan background-color akan berubah secara instant.

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

Perlu diketahui, bahwa tidak semua property bisa diberi property CSS3 transition atau animation. Untuk itu kita perlu tahu property mana saja yang bisa kita animasikan dan yang tidak bisa kita animasikan. Berikut contoh-contoh property yang bisa dianimasikan dan yang tidak 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, dan lain-lain.

3. Fungsi Transisi / Timing Function.

Salah satu parameter optional pada property CSS3 transition adalah timing function . Parameter ini berfungsi untuk menentukan jenis pergerakan apa yang akan dilakukan saat terjadi transition. Setiap nilai dari timing function berbeda, tergantung dari kecepatan awal dan kecepatan akhir. Berikut jenis nilai timing function yang bisa kita pilih.

● ease 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:

1. Klik kiri, kemudian pilih inspect. Bisa juga menggunakan shortcut-nya Ctrl+Shift+I. Atau bisa juga dari customize and control web browser dari bagian atas sebelah kanan browser yang ada icon 3 titik. Lalu kita pilih more tools, berikutnya pilih developer tools.

2. Cari elemennya yang mau di edit, dengan menggunakan icon tanda panah yang ada dalam kotak.

3. Klik cubic-bezier editornya.

4. Silakan buat kombinasi nilai pergerakan yang cocok.

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

timing function dimana arah pergerakkannya kita bisa atur dengan menggunakan sebuah kurva yang bisa menghasilkan sebuah persamaan.

<!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 adalah parameter optional pada property CSS3 transition yang fungsinya untuk memberikan waktu tunggu sebelum menjalankan sebuah transition. Satuan yang digunakan sama seperti dengan durasi. Jadi kalau dalam satu baris kode, ada 2 durasi. Durasi yang ada di depan pasti durasi untuk melakukan transisi, sedangkan durasi yang selanjutnya atau ada dibelakang adalah untuk delay. Satuannya kita bisa gunakan s ( second ) dan ms ( millisecond ). Jadi ketika kita ingin menggunakan 2 durasi ini, perhatikan perhitungan waktunya. Perhatikan contoh sintak dibawah ini. Transition akan dilakukan setelah 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 bisa menggunakan multiple nilai. Contohnya ketika kita ingin mengatur setiap property yang ingin diberi transition berubah dengan durasi dan delay yang berbeda. 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 untuk catatan saya mengenai transition. Semoga bermanfaat khususnya buat saya dan juga teman-teman yang baru belajar web design.

Dibawah ada source code untuk transition yang bisa digunakan sebagai inspirasi untuk design website. Silakan download apabila membutuhkan.

Happy blogging guys 😉😊😉😊😉…..