Dokumentasi CSS interaktif: Transition

Q: Bagaimana urutan nilai di shorthand transition?

transition: property duration timing-function delay;, misalnya transition: opacity 0.3s ease-in 0.1s;. Satu-satunya aturan ketat adalah nilai waktu pertama adalah durasi dan yang kedua adalah delay. Pisahkan beberapa transisi dengan koma.

Q: Kenapa transition CSS-ku tidak berfungsi?

Penyebab yang umum: transition hanya ada di aturan :hover (jadi animasinya berjalan saat masuk lalu langsung kembali), property-nya tidak bisa dianimasikan (display, atau height ke auto), durasinya tidak punya satuan (0.3, bukan 0.3s), atau nilainya berubah tepat saat elemen ditambahkan ke halaman.

Q: Apakah height: auto bisa diberi transisi?

Tidak di semua browser kalau hanya memakai transisi height biasa: interpolasi ke auto membutuhkan property interpolate-size yang lebih baru, yang belum didukung di semua browser. Solusi yang umum adalah menganimasikan grid-template-rows dari 0fr ke 1fr pada wrapper grid, atau menganimasikan max-height ke nilai yang lebih besar daripada kontennya.

Transition dalam satu contoh

Transition memberi tahu browser: saat property ini berubah, animasikan selama waktu sekian, jangan langsung berganti. Taruh transition di aturan normal elemen, bukan hanya di :hover:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .btn {
      padding: 12px 20px;
      border: 0;
      border-radius: 8px;
      font: inherit;
      color: white;
      background-color: #2563eb;
      transition: background-color 0.4s ease, transform 0.4s ease;
    }
    .btn:hover, .btn:focus-visible {
      background-color: #16a34a;
      transform: translateY(-4px);
    }
    .instant { transition: none; }
  </style>
</head>
<body>
  <button class="btn">Hover me: 0.4s transition</button>
  <button class="btn instant">No transition</button>
</body>
</html>

Arahkan pointer ke tombol pertama: warnanya memudar menjadi hijau dan tombolnya naik 4px selama 0,4 detik, dan saat pointer dijauhkan, transisi yang sama diputar balik. Tombol kedua memakai transition: none dan langsung berganti. Pengguna keyboard mendapat efek yang sama lewat :focus-visible.

Shorthand transition

transition: background-color 0.3s ease-in-out 0.1s;
/*          property         duration timing    delay */

Longhand	Yang diatur	Default
`transition-property`	property mana yang dianimasikan (`all`, atau sebuah daftar)	`all`
`transition-duration`	berapa lama, dalam `s` atau `ms`	`0s`
`transition-timing-function`	kurva kecepatannya	`ease`
`transition-delay`	jeda sebelum mulai (bisa negatif)	`0s`

Default durasinya 0s, itulah sebabnya tidak ada yang beranimasi sampai kamu menetapkannya. Di shorthand, nilai waktu pertama selalu durasi dan yang kedua adalah delay. Untuk pengaturan yang berbeda per property, pisahkan dengan koma:

.card {
  transition: transform 0.2s ease-out, box-shadow 0.4s ease-out;
}

Timing function secara berdampingan

Timing function menentukan bagaimana kecepatan berubah selama transisi. Tekan Play, dan ketujuh bar bergerak sejauh jarak yang sama dalam 1,5 detik yang sama:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timing functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .lane { position: relative; height: 26px; margin: 4px 0; background: #f3f4f6; }
    .dot { position: absolute; top: 3px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #2563eb; transition: left 1.5s; }
    .lane span { position: absolute; inset-inline-start: 30px; top: 5px; color: #111827; }
    .go .dot { left: calc(100% - 20px); }
    button { margin-bottom: 6px; }
  </style>
</head>
<body>
  <button id="play">Play</button>
  <div id="lanes"></div>
  <script>
    const fns = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(0.3, 1.6, 0.6, 1)', 'steps(5)'];
    const lanes = document.getElementById('lanes');
    fns.forEach((fn) => {
      lanes.insertAdjacentHTML('beforeend', '<div class="lane"><div class="dot" style="transition-timing-function: ' + fn + '"></div><span>' + fn + '</span></div>');
    });
    document.getElementById('play').addEventListener('click', () => lanes.classList.toggle('go'));
  </script>
</body>
</html>

Timing function	Rasanya seperti
`linear`	kecepatan tetap, terasa mekanis
`ease` (default)	mulai cepat, berhenti dengan lembut
`ease-in`	mulai pelan, berakhir cepat: cocok untuk sesuatu yang pergi
`ease-out`	mulai cepat, berakhir pelan: cocok untuk sesuatu yang datang
`ease-in-out`	pelan di kedua ujung
`cubic-bezier(x1, y1, x2, y2)`	kurvamu sendiri, nilai y di atas 1 melewati target lalu kembali
`steps(n)`	melompat dalam n langkah yang sama, tanpa frame di antaranya

Untuk efek hover dan menu, ease-out dengan durasi antara 150ms dan 300ms terasa responsif.

Apa yang bisa diberi transisi

Property yang punya nilai di antara dua nilai bisa diberi transisi: warna, panjang (width, padding, margin), opacity, transform, box-shadow, border-radius, filter, background-color. Property yang melompat dari satu kata kunci ke kata kunci lain, seperti display atau font-family, langsung berganti.

height: auto adalah yang paling sering menjebak: panel yang terbuka dari height: 0 ke height: auto tidak beranimasi secara default, karena browser tidak menghitung nilai-nilai di antara 0 dan "auto". Solusi yang andal adalah wrapper grid yang satu-satunya baris di dalamnya berubah dari 0fr ke 1fr:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition to auto height</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      display: grid;
      grid-template-rows: 0fr;              /* closed: the row has no height */
      transition: grid-template-rows 0.35s ease-out;
    }
    .panel.open { grid-template-rows: 1fr; } /* open: the row fits its content */
    .inner { overflow: hidden; }
    .inner p { margin: 0; padding: 12px; background: #e5e7eb; }
  </style>
</head>
<body>
  <button id="toggle" aria-expanded="false" aria-controls="panel">Show details</button>
  <div class="panel" id="panel">
    <div class="inner"><p>This content can be any height. The panel animates to fit it exactly, with no fixed max-height.</p></div>
  </div>
  <script>
    const btn = document.getElementById('toggle');
    const panel = document.getElementById('panel');
    btn.addEventListener('click', () => {
      const open = panel.classList.toggle('open');
      btn.setAttribute('aria-expanded', open);
    });
  </script>
</body>
</html>

aria-expanded memberi tahu pengguna screen reader apakah panelnya terbuka, sesuatu yang tidak bisa disampaikan animasinya saja.

Menjalankan kode saat transition selesai

Event transitionend dipicu saat sebuah transisi selesai, satu kali per property. Pakai event ini untuk melakukan sesuatu setelah gerakannya selesai, misalnya memindahkan fokus atau menghapus sebuah elemen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transitionend</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .note { padding: 12px; background: #16a34a; color: white; transition: opacity 0.5s ease; }
    .note.hide { opacity: 0; }
  </style>
</head>
<body>
  <div class="note" id="note">Saved. <button id="close">Dismiss</button></div>
  <p id="out"></p>
  <script>
    const note = document.getElementById('note');
    document.getElementById('close').addEventListener('click', () => note.classList.add('hide'));
    note.addEventListener('transitionend', (e) => {
      document.getElementById('out').textContent = 'transitionend: ' + e.propertyName + ' after ' + e.elapsedTime + 's';
      note.remove();
    });
  </script>
</body>
</html>

Hormati reduced motion

Sebagian orang menyalakan "kurangi gerakan" di pengaturan sistemnya karena gerakan di layar membuat mereka pusing atau terganggu. Pertahankan fade warna dan opacity, lalu hilangkan gerakan besar, dengan media query:

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 0.2s ease; } /* no movement, only the color */
}

Jaga transisi tetap mulus

transform dan opacity adalah property yang paling ringan untuk dianimasikan: browser bisa memindahkan dan memudarkan elemen tanpa menghitung ulang layout. Memberi transisi pada width, height, top, atau margin membuat browser menata ulang halaman di setiap frame, yang bisa tersendat di ponsel yang lambat. Untuk memindahkan sesuatu, lebih baik pakai transform: translate() daripada left atau margin. Halaman transform membahas fungsi-fungsinya.

Kesalahan yang sering terjadi

transition hanya di aturan :hover. Efeknya beranimasi saat masuk, tetapi langsung kembali saat hover berakhir. Taruh transition di aturan dasarnya.
Durasi tanpa satuan. transition: opacity 300 tidak valid. Tulis 300ms atau 0.3s.
transition: all. Cara ini menganimasikan setiap property yang berubah, termasuk yang tidak ingin kamu animasikan, dan bisa membuat perubahan layout terasa lamban. Tulis daftar property-nya.
Mengira display: none bisa memudar. display langsung berganti. Lebih baik pudarkan opacity (lalu atur visibility: hidden saat fade-nya selesai).
Transisi ke height: auto. Hasilnya melompat. Pakai teknik grid-template-rows di atas.
Durasi yang lama untuk interaksi kecil. Apa pun yang lebih dari sekitar 400ms pada tombol atau menu terasa lambat.

Pertanyaan yang sering diajukan

Bagaimana cara kerja transition CSS?

Kamu menentukan di sebuah elemen property mana yang dianimasikan dan berapa lama, misalnya transition: background-color 0.3s ease;. Saat nilai property itu berubah (lewat :hover, sebuah class, atau JavaScript), browser menganimasikannya dari nilai lama ke nilai baru, bukan langsung berganti.

Bagaimana urutan nilai di shorthand transition?

transition: property duration timing-function delay;, misalnya transition: opacity 0.3s ease-in 0.1s;. Satu-satunya aturan ketat adalah nilai waktu pertama adalah durasi dan yang kedua adalah delay. Pisahkan beberapa transisi dengan koma.

Kenapa transition CSS-ku tidak berfungsi?

Penyebab yang umum: transition hanya ada di aturan :hover (jadi animasinya berjalan saat masuk lalu langsung kembali), property-nya tidak bisa dianimasikan (display, atau height ke auto), durasinya tidak punya satuan (0.3, bukan 0.3s), atau nilainya berubah tepat saat elemen ditambahkan ke halaman.

Apakah height: auto bisa diberi transisi?

Tidak di semua browser kalau hanya memakai transisi height biasa: interpolasi ke auto membutuhkan property interpolate-size yang lebih baru, yang belum didukung di semua browser. Solusi yang umum adalah menganimasikan grid-template-rows dari 0fr ke 1fr pada wrapper grid, atau menganimasikan max-height ke nilai yang lebih besar daripada kontennya.

Apa perbedaan transition dan animation di CSS?

Transition berjalan sekali, di antara dua nilai, saat sebuah property berubah. Animation memakai @keyframes, bisa punya banyak tahap, berjalan sendiri saat halaman dimuat, dan bisa diulang atau terus berulang.

Konsep terkait

CSS Transition: Property, Durasi, Easing dan Delay