CSS Transition Adalah: Cara Kerja, 4 Sub-Properti, dan Timing Function

CSS transition adalah cara membuat perubahan tampilan elemen berlangsung mulus, bukan meloncat seketika. Saat sebuah properti berubah nilai, misalnya warna tombol saat kamu arahkan kursor, transition membuat browser “menganimasikan” perpindahan dari nilai lama ke nilai baru selama durasi tertentu, bukan mengganti nilainya dalam sekejap. Hasilnya: interaksi yang terasa halus dan hidup.

Tanpa transition, semua perubahan CSS terjadi instan. Tombol yang warnanya berubah saat hover akan “kedip” langsung ke warna baru. Dengan transition, warnanya luntur perlahan dari warna lama ke warna baru. Panduan ini membahas semuanya berurutan: apa itu transition dan dua state yang wajib ada, empat sub-properti (transition-property, transition-duration, transition-timing-function, transition-delay), shorthand transition, pilihan timing function, jebakan transition: all, properti yang tidak bisa dianimasikan, sampai bedanya dengan animation. Semua bisa langsung kamu coba.

Transition Adalah… (Definisi dan Cara Kerjanya)

Transition adalah interpolasi halus antara dua nilai sebuah properti CSS: nilai awal (state default) dan nilai akhir (state baru). Browser menghitung nilai-nilai di antara keduanya frame demi frame, sehingga perubahannya terlihat sebagai gerakan mulus, bukan lompatan.

Kuncinya: transition selalu butuh pemicu, sesuatu yang mengubah nilai properti. Pemicu paling umum adalah pseudo-class seperti :hover atau :focus. Kamu pasang transition di elemen dasarnya, lalu tulis nilai baru di state :hover-nya.

<button class="tombol">Arahkan kursor ke sini</button>

.tombol {
  background: #6366f1;
  transition: background 300ms ease; /* siapkan animasi di sini */
}
.tombol:hover {
  background: #f97316; /* nilai baru → transition menganimasikannya */
}

Saat kursor masuk, warna tidak langsung berganti ke oranye, ia luntur perlahan selama 300 milidetik. Saat kursor keluar, warna kembali ke biru dengan mulus juga.

Pemicu yang memicu perubahan nilai ini paling sering datang dari pseudo-class. Kalau kamu belum kenal betul cara kerja :hover dan teman-temannya, mampir dulu ke panduan pseudo-class CSS, di sana dibahas tuntas kapan sebuah state aktif dan bagaimana browser mendeteksinya.

Empat Sub-Properti Transition

Transition sebenarnya tersusun dari empat properti terpisah: transition-property (properti apa yang dianimasikan), transition-duration (berapa lama), transition-timing-function (kurva percepatannya), dan transition-delay (jeda sebelum mulai). Keempatnya bisa ditulis satu per satu, atau digabung dalam satu shorthand transition.

Versi terpisahnya seperti ini:

.kotak {
  transition-property: background;      /* properti yang dianimasikan */
  transition-duration: 400ms;           /* lama animasi */
  transition-timing-function: ease-in-out; /* kurva kecepatan */
  transition-delay: 100ms;              /* jeda sebelum mulai */
}

Berikut rincian tugas masing-masing sub-properti:

Sub-properti	Tugasnya	Contoh nilai
transition-property	Menentukan properti CSS mana yang akan dianimasikan	background, transform, opacity, all
transition-duration	Menentukan berapa lama animasi berlangsung, inilah properti yang mengatur durasi transition	300ms, 0.5s, 2s
transition-timing-function	Menentukan kurva percepatan: mulai pelan lalu cepat, konstan, dan seterusnya	ease, linear, ease-in-out, cubic-bezier(...)
transition-delay	Menentukan jeda tunggu sebelum animasi mulai berjalan	0s, 100ms, 1s

Dari keempatnya, dua yang paling sering dipakai adalah transition-property dan transition-duration, tanpa durasi (0s, nilai default), tidak ada animasi yang terlihat karena perpindahannya seketika.

Paling enak dicoba langsung. Nyalakan-matikan state, geser durasi dan delay-nya, ganti timing function-nya, lalu lihat kotaknya bergeser, membesar, dan berganti warna dengan mulus:

Coba Sendiri

○ Aktifkan

Durasi500ms

Delay0ms

Timing Functioneaselinearease-inease-outease-in-out

OFF

transition: all 500ms ease;Salin

Shorthand transition: Menulis Empat Sekaligus

Cara paling umum menulis transition adalah shorthand satu baris dengan urutan transition: property duration timing-function delay. Browser membaca nilai waktu pertama sebagai durasi dan nilai waktu kedua sebagai delay, jadi urutan dua angka waktu itu penting.

.kotak {
  transition: transform 400ms ease-in-out 100ms;
  /* sama persis dengan:
     transition-property: transform;
     transition-duration: 400ms;
     transition-timing-function: ease-in-out;
     transition-delay: 100ms; */
}

Kamu boleh menghilangkan bagian yang tidak diperlukan, asal minimal ada durasinya:

.a { transition: 300ms; }                 /* semua properti, ease, tanpa delay */
.b { transition: opacity 300ms; }         /* opacity, 300ms, ease */
.c { transition: opacity 300ms linear; }  /* dengan timing function */

Kamu juga bisa menganimasikan beberapa properti sekaligus dengan durasi berbeda, dipisah koma:

.kartu {
  transition:
    transform 300ms ease,
    box-shadow 500ms ease-in-out;
}

Timing Function: Mengatur “Rasa” Gerakan

transition-timing-function menentukan bagaimana kecepatan animasi berubah sepanjang durasinya, apakah mulai pelan lalu cepat, konstan, atau sebaliknya. Ini yang membedakan gerakan yang terasa “natural” dari yang terasa kaku.

Nilai bawaan yang paling sering dipakai:

• ease (default), mulai pelan, cepat di tengah, melambat di akhir. Terasa paling natural untuk kebanyakan interaksi.
• linear, kecepatan konstan dari awal sampai akhir. Cocok untuk animasi berulang seperti loading spinner.
• ease-in, mulai pelan lalu makin cepat. Bagus untuk elemen yang “pergi” keluar layar.
• ease-out, mulai cepat lalu melambat di akhir. Bagus untuk elemen yang “datang” masuk.
• ease-in-out, pelan di awal dan akhir, cepat di tengah. Versi lebih tegas dari ease.

Kalau lima kata kunci itu belum cukup, ada cubic-bezier(), kamu mendefinisikan kurva kecepatanmu sendiri lewat empat angka titik kontrol:

.pantul {
  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
  /* kurva "overshoot", kotak sedikit melewati target lalu mundur, efek memantul */
}

Sebenarnya, kelima kata kunci di atas hanyalah nama singkat untuk cubic-bezier() tertentu. ease sama dengan cubic-bezier(0.25, 0.1, 0.25, 1). Kamu tidak perlu menghafal angkanya, cukup tahu bahwa cubic-bezier() memberi kontrol penuh saat kata kunci bawaan terasa kurang pas.

transition: all, Mudah tapi Ada Ongkosnya

transition: all 300ms ease menganimasikan SEMUA properti yang berubah sekaligus, tanpa perlu menyebutkannya satu per satu. Ini terlihat praktis, tapi menyimpan dua masalah yang sering luput.

.kartu {
  transition: all 300ms ease; /* apa pun yang berubah, ikut dianimasikan */
}

Aturan praktisnya: pakai all hanya untuk prototipe cepat atau kasus sederhana. Di kode produksi, sebutkan properti eksplisit, kodemu jadi lebih jelas maksudnya dan performanya lebih ringan. Dua properti yang paling murah dianimasikan (dan paling mulus) adalah transform dan opacity, karena browser bisa menanganinya tanpa menghitung ulang tata letak.

Properti yang Tidak Bisa Ditransisikan

Tidak semua properti CSS bisa dianimasikan, yang paling terkenal adalah display. Transition hanya bekerja untuk properti yang punya nilai “antara” yang bisa dihitung. display melompat langsung antara none dan block tanpa nilai tengah, jadi transition mengabaikannya.

Secara umum: properti yang nilainya berupa angka, panjang, atau warna bisa ditransisikan; properti yang nilainya “kata kunci diskret” (seperti display) tidak bisa. Kalau ragu, coba saja, kalau tidak beranimasi, kemungkinan besar properti itu memang tidak bisa ditransisikan.

Salah satu properti yang paling sering ditransisikan adalah transform, geser, putar, perbesar. Kombinasi transition + transform inilah resep di balik hampir semua efek hover yang halus. Pelajari transform secara mendalam di panduan CSS transform, lalu gabungkan dengan transition dari artikel ini untuk hasil yang benar-benar hidup.

Transition vs Animation: Apa Bedanya?

Perbedaan utama: transition menganimasikan perpindahan antara DUA state dan butuh pemicu, sedangkan animation (dengan @keyframes) bisa punya banyak langkah dan berjalan sendiri tanpa pemicu. Keduanya menghasilkan gerakan, tapi cocok untuk kebutuhan berbeda.

Aspek	transition	animation (@keyframes)
Jumlah state	Dua: awal → akhir	Banyak langkah (0%, 50%, 100%, dst.)
Pemicu	Butuh pemicu (:hover, ganti class)	Bisa jalan otomatis saat halaman dimuat
Pengulangan	Sekali per pemicu	Bisa loop tak terbatas (infinite)
Cocok untuk	Efek hover, focus, toggle	Loading spinner, gerakan berulang, intro

Ringkasnya: kalau kamu hanya berpindah antara dua kondisi dan ada pemicunya (seperti hover), transition adalah pilihan yang lebih sederhana dan tepat. Kalau kamu butuh gerakan bertahap dengan banyak langkah atau yang berjalan sendiri berulang-ulang, barulah animation dengan @keyframes yang kamu butuhkan.

🧠Cek Pemahaman

Properti transition mana yang mengatur berapa lama sebuah animasi berlangsung?

Atransition-propertyBtransition-durationCtransition-timing-functionDtransition-delay

FAQ Seputar CSS Transition

CSS transition adalah?

CSS transition adalah mekanisme untuk membuat perubahan nilai properti CSS berlangsung mulus selama durasi tertentu, bukan meloncat seketika. Transition menganimasikan perpindahan antara dua state, nilai awal (default) dan nilai baru yang dipicu oleh sesuatu seperti :hover. Ia diatur lewat empat sub-properti: transition-property, transition-duration, transition-timing-function, dan transition-delay.

Properti apa yang mengatur durasi transition?

transition-duration. Properti inilah yang menentukan berapa lama animasi berlangsung, misalnya 300ms atau 0.5s. Kalau kamu tidak menulisnya, nilainya default 0s, artinya perubahan terjadi seketika tanpa animasi yang terlihat.

Di mana harus menulis properti transition supaya animasinya dua arah?

Tulis transition di selector dasar elemen (misalnya .tombol), bukan di .tombol:hover. Dengan begitu, gerakan mulus berlaku baik saat state masuk (hover) maupun saat kembali ke default. Kalau transition ditaruh di :hover, animasi hanya berjalan saat masuk, dan kembalinya akan meloncat tanpa animasi.

Apa bedanya transition dan animation?

Transition menganimasikan perpindahan antara dua state saja dan butuh pemicu (seperti hover atau perubahan class). Animation dengan @keyframes bisa punya banyak langkah, berjalan otomatis tanpa pemicu, dan bisa berulang tak terbatas. Untuk efek hover sederhana, pakai transition; untuk gerakan berulang seperti loading spinner, pakai animation.

Langkah Selanjutnya

Sekarang kamu sudah pegang semuanya: transition adalah animasi halus antara dua state yang butuh pemicu, tersusun dari empat sub-properti (transition-property, transition-duration, transition-timing-function, transition-delay), ditulis ringkas lewat shorthand transition: property duration timing-function delay, dikendalikan “rasanya” oleh timing function, dan berbeda peran dengan animation.

Seperti biasa, konsep baru melekat lewat praktik, coba buat satu tombol yang warna dan posisinya berubah halus saat hover, lalu mainkan durasi dan timing function-nya sampai gerakannya terasa pas. Kalau mau latihan yang terstruktur dengan feedback langsung, lesson transitions di Hyper Sheets menyediakan editor interaktif yang mengecek jawabanmu lesson per lesson.

Setelah transition lancar, lanjutkan ke CSS transform untuk mempelajari cara menggeser, memutar, dan memperbesar elemen, pasangan sempurna transition, dan perdalam pemahaman pemicunya lewat pseudo-class CSS. Selamat ngoding!