Transisi di CSS: Cara Membuat dan Codenya

Section Artikel

1 Transisi CSS
2 Browser Pendukung
3 Cara Menggunakan Transisi CSS
4 Ubah Nilai Properti Transisi CSS
5 Menentukan Kurva Kecepatan Transisi
6 Efek Transisi Delay
7 Transisi + Transformasi
8 Contoh Transisi Lainnya
9 Properti Transisi CSS

Transisi CSS

Transisi CSS memungkinkan kita untuk memanipulasi properti atau value sebuah elemen dengan baik dalam durasi tertentu.

Berikut ini properti transisi CSS yang akan kita pelajari :

transition
transition-delay
transition-duration
transition-property
transition-timing-function

Browser Pendukung

Property	Google Chrome	Microsoft Edge	Mozila Firefox	Safari	Opera
transition	26.0	10.0	16.0	6.1	12.1
transition-delay	26.0	10.0	16.0	6.1	12.1
transition-duration	26.0	10.0	16.0	6.1	12.1
transition-property	26.0	10.0	16.0	6.1	12.1
transition-timing-function	26.0	10.0	16.0	6.1	12.1

Cara Menggunakan Transisi CSS

Untuk membuat efek transisi, kita harus menentukan dua hal:

Properti yang ingin diberi efek transisi
Durasi efek transisi

Catatan: Jika bagian durasi tidak ditentukan, transisi tidak akan berpengaruh karena nilai defaultnya adalah 0.

Contoh berikut menunjukkan elemen merah 100px * 100px. Elemen juga menetapkan efek transisi untuk properti lebar, dengan durasi 2 detik:

Contoh :

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Efek transisi akan dimulai ketika properti CSS yang ditentukan (width) mengubah nilai.

Sekarang, mari kita tentukan nilai baru untuk properti width ketika pengguna mengarahkan mouse ke elemen <div> :

Contoh :

div:hover {
  width: 300px;
}

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Arahkan kursor ke elemen div di bawah, untuk melihat efek transisi:</p>
<div></div>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Perhatikan ketika kursor bergerak keluar dari elemen, secara bertahap akan berubah kembali ke gaya aslinya.

Ubah Nilai Properti Transisi CSS

Contoh berikut menambahkan efek transisi untuk properti lebar dan tinggi, dengan durasi 2 detik untuk lebar dan 4 detik untuk tinggi:

Contoh :

div {
  transition: width 2s, height 4s;
}

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Arahkan kursor ke elemen div di bawah, untuk melihat efek transisi:</p>

<div></div>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Menentukan Kurva Kecepatan Transisi

Properti transition-timing-function dapat menentukan kurva kecepatan dari efek transisi

Di bawah ini merupakan nilai dari properti transition-timing-function :

ease – menentukan efek transisi dengan awal yang lambat, lalu cepat, lalu akhiri perlahan (ini default)
linear – menentukan efek transisi dengan kecepatan yang sama dari awal hingga akhir
ease-in – menentukan efek transisi dengan awal yang lambat
ease-out – menentukan efek transisi dengan akhir yang lambat
ease-in-out -menentukan efek transisi dengan awal dan akhir yang lambat
cubic-bezier(n,n,n,n) – memungkinkan kita untuk menentukan nilai sendiri dalam fungsi kubik-bezier

Contoh berikut menunjukkan beberapa kurva kecepatan berbeda yang dapat digunakan:

Contoh :

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-timing-function Property</h1>

<p>Arahkan kursor ke elemen div di bawah, untuk melihat kurva kecepatan yang berbeda:</p>

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Efek Transisi Delay

Properti transition-delay dapat menentukan penundaan (dalam detik) untuk efek transisi.

Contoh berikut memiliki jeda 1 detik sebelum memulai:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 3s;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-delay Property</h1>

<p>Arahkan kursor ke elemen div di bawah, untuk melihat kurva kecepatan yang berbeda</p>

<div></div>

<p><b>Note:</b> Efek transisi memiliki jeda 1 detik sebelum memulai.</p>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Transisi + Transformasi

Contoh berikut menambahkan efek transisi ke transformasi:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>Arahkan kursor ke elemen div di bawah:</p>

<div></div>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Contoh Transisi Lainnya

Properti transisi CSS dapat ditentukan satu per satu, seperti ini:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Properties Specified One by One</h1>

<p>Arahkan kursor ke elemen div di bawah, untuk melihat efek transisi:</p>

<div></div>

<p><b>Note:</b> Efek transisi memiliki jeda 1 detik sebelum memulai.</p>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

atau dengan menggunakan properti transition yang lain:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s linear 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>Using The transition Shorthand Property</h1>

<p>Arahkan kursor ke elemen div di bawah, untuk melihat efek transisi:</p>

<div></div>

<p><b>Note:</b> Efek transisi memiliki jeda 1 detik sebelum memulai.</p>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Properti Transisi CSS

Tabel berikut mencantumkan semua properti transisi CSS:

Property	Deskripsi
transition	Properti singkatan untuk menyetel empat properti transisi menjadi satu properti
transition-delay	Menentukan penundaan (dalam detik) untuk efek transisi
transition-duration	Menentukan berapa detik atau milidetik yang dibutuhkan untuk menyelesaikan efek transisi
transition-property	Menentukan nama properti CSS untuk efek transisi
transition-timing-function	Menentukan kurva kecepatan dari efek transisi

CSS transisi

Transisi di CSS: Cara Membuat dan Codenya

Transisi CSS

Browser Pendukung

Cara Menggunakan Transisi CSS

Ubah Nilai Properti Transisi CSS

Menentukan Kurva Kecepatan Transisi

Efek Transisi Delay

Transisi + Transformasi

Contoh Transisi Lainnya

Properti Transisi CSS

Variabel di CSS: Cara Membuat dan Contoh Codenya

Animasi di CSS: Cara Membuat dan Codenya

You may also like