Transition Timing

Dua transisi dengan durasi sama dapat terasa sangat berbeda: satu terasa tanggap di awal, yang lain terasa tersendat lalu melaju. Perbedaan itu ditentukan oleh timing function — kurva yang memetakan berjalannya waktu ke berjalannya perubahan nilai. Alih-alih bergerak dengan kecepatan tetap dari titik awal ke titik akhir, elemen dapat dipercepat di awal, ditahan sejenak, atau melompat dalam tahapan tetap. Pada Chapter ini kita mengenal enam pilihan bawaan, menggambar kurva sendiri dengan cubic-bezier(), dan membagi durasi menjadi langkah-langkah dengan steps().

Enam Kurva Bawaan dan Kapan Dipakai #

CSS menyediakan lima kata kunci berbasis kurva plus linear. Tabel berikut merangkum bentuk gerak masing-masing beserta konteks pemakaiannya:

Nilai	Bentuk gerak	Kapan dipakai
`linear`	Kecepatan tetap dari awal ke akhir	Animasi berulang tanpa jeda: spinner, progress bar
`ease` (default)	Cepat di awal, melambat di akhir	Pilihan aman untuk umpan balik UI umum
`ease-in`	Lambat di awal, cepat di akhir	Elemen keluar dari layar
`ease-out`	Cepat di awal, lambat di akhir	Elemen masuk ke layar
`ease-in-out`	Lambat di kedua ujung, cepat di tengah	Elemen bergerak bolak-balik dalam satu area

Kurva yang tepat mengikuti arah gerak: elemen yang muncul terasa wajar bila berhenti dengan lembut (ease-out), sedangkan elemen yang pergi terasa wajar bila meninggalkan posisi dengan tenang lalu meningkat (ease-in). Demo chapter ini menaruh tujuh lintasan; bola pada setiap lintasan bergeser saat kursor berada di atasnya:

css
kurva-timing.html (cuplikan)
.bola {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(14, 165, 233);
  transition: transform 1.2s ease-out;
}
.lintasan:hover .bola {
  transform: translateX(180px);
}

Hasil di Browser:

text
Tujuh lintasan tampil dengan bola biru di ujung kiri. Nilai computed
transition-timing-function tiap bola: "ease", "linear", "ease-in",
"ease-out", "ease-in-out", "cubic-bezier(0.4, 0, 0.2, 1)", dan
"steps(4)". Semua bola memakai transition-duration "1.2s".

Perhatikan nilai terakhir: pada CSS kita menulis steps(4, end), tetapi harness melaporkan steps(4) — browser menghilangkan posisi end karena merupakan nilai bawaan. Perilaku serupa berlaku pada kurva ease: kata kunci tetap disimpan sebagai kata kunci, sementara kurva buatan tersimpan utuh seperti cubic-bezier(0.4, 0, 0.2, 1).

cubic-bezier(): Menggambar Kurva Sendiri #

Fungsi cubic-bezier(x1, y1, x2, y2) menerima dua titik kontrol yang membentuk kurva dari titik (0, 0) ke titik (1, 1). Sumbu x mewakili waktu dan wajib berada di antara 0 dan 1; sumbu y mewakili kemajuan perubahan dan boleh keluar dari rentang itu — nilai y di atas 1 membuat elemen melampaui tujuan lalu kembali, memberi efek mantul ringan:

css
.kartu {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kartu:hover { transform: scale(1.08); }

Bila ingin titik awal yang aman, banyak tim memakai satu kurva standar untuk seluruh antarmuka, misalnya cubic-bezier(0.4, 0, 0.2, 1) yang menyeimbangkan kecepatan awal dan perlambatan akhir. Nilai inilah yang diprobe pada demo chapter ini.

steps(): Melompat, Bukan Mengalir #

steps(n) membagi durasi menjadi n langkah; nilai berpindah mendadak di setiap batas langkah alih-alih mengalir. Posisi lompatan dapat diatur: steps(4, end) memindahkan nilai di akhir setiap langkah (bawaan), sedangkan steps(4, start) memindahkannya di awal. Fungsi ini cocok untuk efek mekanis: loader titik-titik, sprite sheet karakter, atau indikator yang berdetak:

css
.detik {
  animation-timing-function: steps(60, end); /* berdetak per detik */
}

Sampai di sini kita menguji timing pada transition. Kurva yang sama juga dipakai oleh animation melalui animation-timing-function, sehingga yang kita pelajari di sini berlaku untuk kedua mekanisme.