Transition Timing Function

Dua transisi dengan durasi sama bisa terasa sangat berbeda: satu terasa hidup, satu lagi terasa datar. Pembedanya adalah ritme — bagaimana kecepatan dibagikan sepanjang durasi. transition-timing-function mengatur pembagian itu lewat kurva percepatan, dan pilihan kurvanya termasuk keputusan animasi yang paling terasa oleh pengguna.

Lima Kata Kunci Bawaan #

CSS menyediakan lima kata kunci yang menutup sebagian besar kebutuhan:

.panel-geser {
  transition-property: transform;
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out;
}

Empat bola berikut bergerak dengan jarak dan durasi yang sama persis — yang membedakan hanya transition-timing-function-nya (demo memakai translateX untuk menggeser bola; transform dibahas tuntas pada chapter-chapter berikutnya).

Saat kursor meninggalkan baris, bola berjalan pulang dengan kurva yang sama karena transition terpasang pada keadaan dasar; jika ingin perjalanan pulangnya berbeda, pasang timing function lain pada aturan keadaan berubahnya.

Cara mudah membayangkannya adalah mobil. ease-in adalah pengemudi yang perlahan menginjak gas; ease-out adalah pengereman mulus mendekati garis akhir; linear adalah kereta yang kecepatannya terkunci. ease dan ease-in-out menggabungkan keduanya dengan pembagian yang berbeda.

cubic-bezier: Kurva Buatan Sendiri #

Kelima kata kunci di atas sebenarnya adalah nilai cubic-bezier bawaan. Fungsi cubic-bezier(x1, y1, x2, y2) mendefinisikan kurva lewat dua titik kontrol, dan tabel berikut menunjukkan padanannya:

Empat angka itu adalah koordinat dua titik kontrol pada grafik waktu (sumbu x) melawan kemajuan animasi (sumbu y). Aturannya: nilai x harus berada di antara 0 dan 1, sedangkan nilai y bebas. Kebebasan nilai y inilah sumber efek yang menarik: nilai y di atas 1 membuat animasi melewati titik akhir sejenak lalu kembali, seperti pegas yang tertarik lalu menenangkan diri — kesan yang sering disebut springy.

.tombol-pegas {
  transition-property: transform;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Arahkan kursor ke tombol berikut: kurva pegas membawanya melewati titik akhir sejenak sebelum menenangkan diri — gerakan kecil yang membuat antarmuka terasa punya karakter.

steps: Perpindahan Bertahap #

Tidak semua gerakan harus mulus. Fungsi steps(n) membagi durasi menjadi n lompatan tanpa jarak halus di antaranya:

.indikator-langkah {
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: steps(4);
}

Arahkan kursor ke jalur berikut: penandanya berpindah dalam empat lompatan, bukan satu garis mulus.

Pola ini jarang dibutuhkan pada antarmuka biasa; tempatnya yang paling wajar adalah efek seperti mesin tik atau indikator bertahap.

Memilih Kurva untuk Situasi yang Tepat #

Kesalahan Umum #

Ringkasan #

transition-timing-function mengatur ritme di dalam durasi: lima kata kunci menutup kebutuhan harian, cubic-bezier membuka kurva kustom termasuk efek pegas, dan steps membagi perubahan menjadi lompatan. Kurva mengatur bagaimana gerakan berjalan, tetapi belum mengatur kapan gerakan dimulai. Chapter berikutnya menambahkan potongan itu lewat transition-delay.