Easing & Timing Functions

Timing function (atau easing) menentukan kurva kecepatan animasi — apakah animasi mulai pelan lalu cepat, atau cepat lalu pelan, atau konstan. Easing yang tepat membuat animasi terasa natural dan menyenangkan.

Built-in Timing Functions

CSS menyediakan beberapa keyword easing:

/* linear — kecepatan konstan dari awal sampai akhir */
.linear { transition: transform 0.3s linear; }

/* ease — mulai pelan, cepat di tengah, pelan di akhir (default) */
.ease { transition: transform 0.3s ease; }

/* ease-in — mulai pelan, makin cepat */
.ease-in { transition: transform 0.3s ease-in; }

/* ease-out — mulai cepat, makin pelan */
.ease-out { transition: transform 0.3s ease-out; }

/* ease-in-out — pelan di awal dan akhir */
.ease-in-out { transition: transform 0.3s ease-in-out; }

Kapan Pakai yang Mana?

Custom Cubic Bezier

Untuk kontrol penuh, gunakan cubic-bezier(x1, y1, x2, y2):

/* cubic-bezier menggunakan 2 control point */
/* (x1, y1) = control point pertama */
/* (x2, y2) = control point kedua */

.custom-ease {
  /* Mulai sangat cepat, perlahan di akhir */
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Overshoot — melewati target lalu kembali */
.overshoot {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Snappy — terasa cepat dan tajam */
.snappy {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

Tips: Gunakan tools seperti cubic-bezier.com atau DevTools untuk membuat dan preview kurva custom.

Easing Populer

/* Material Design standard easing */
.material-standard {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Apple-style easing */
.apple-ease {
  transition: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Bounce effect */
.bounce {
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Elastic / Spring-like */
.elastic {
  transition: transform 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

Step Functions

Untuk animasi frame-by-frame (seperti sprite animation):

/* steps(n) — bagi animasi jadi n langkah diskrit */
.sprite {
  animation: walk 0.8s steps(8) infinite;
}

/* step-start dan step-end */
.blink {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

Konsep Spring Physics

Library modern seperti Framer Motion menggunakan spring physics alih-alih cubic-bezier:

// Spring animation menggunakan parameter fisika:
// - stiffness: kekakuan pegas (makin tinggi = makin cepat)
// - damping: redaman (makin tinggi = makin sedikit bounce)
// - mass: massa objek (makin berat = makin lambat)

// Framer Motion example
<motion.div
  animate={{ x: 100 }}
  transition={{
    type: 'spring',
    stiffness: 300,
    damping: 20,
  }}
/>

Spring animation terasa lebih natural karena mengikuti hukum fisika nyata — objek berat bergerak lambat, objek ringan bergerak cepat dan bouncy.

Perbandingan Visual

/* Semua animasi berikut punya durasi sama,
   tapi terasa sangat berbeda karena easing */

.box-1 { animation: slide 1s linear; }
.box-2 { animation: slide 1s ease-in; }
.box-3 { animation: slide 1s ease-out; }
.box-4 { animation: slide 1s ease-in-out; }
.box-5 { animation: slide 1s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(300px); }
}

Easing adalah "bumbu" animasi — perbedaan antara animasi yang terasa kaku dan animasi yang terasa hidup. Eksperimenlah dengan berbagai kurva!