CSS

Transisi di CSS: Cara Membuat dan Codenya

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

PropertyGoogle ChromeMicrosoft EdgeMozila FirefoxSafariOpera
transition26.010.016.06.112.1
transition-delay26.010.016.06.112.1
transition-duration26.010.016.06.112.1
transition-property26.010.016.06.112.1
transition-timing-function26.010.016.06.112.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:

PropertyDeskripsi
transitionProperti singkatan untuk menyetel empat properti transisi menjadi satu properti
transition-delayMenentukan penundaan (dalam detik) untuk efek transisi
transition-durationMenentukan berapa detik atau milidetik yang dibutuhkan untuk menyelesaikan efek transisi
transition-propertyMenentukan nama properti CSS untuk efek transisi
transition-timing-functionMenentukan kurva kecepatan dari efek transisi

Hanifah Nurbaeti

Share
Tags: CSStransisi