CSS ile Yumuşak Geçişler: Cubic Bezier'i Anlamak

transition: all 0.3s ease; yazıp geçmek çok kolay. Ama sitenizin "kaliteli hissettirmesi" ile "ucuz hissettirmesi" arasındaki fark, çoğu zaman tam olarak bu satırın içinde saklı.

Eğri neden önemli?

Tarayıcının varsayılan ease değeri, gerçek dünyadaki hareketleri pek taklit etmez. Gerçek nesneler aniden durmaz, yavaşça yavaşlar. İşte cubic-bezier() fonksiyonu tam olarak bunu kontrol etmenizi sağlar.

.card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover {
  transform: translateY(-4px);
}

Aşağıdaki interaktif alanda farklı eğrileri canlı olarak test edebilir ve animasyonun nasıl değiştiğini izleyebilirsiniz:

Dört sayı ne anlama geliyor?

cubic-bezier(x1, y1, x2, y2) fonksiyonu, hareketin hız eğrisini iki kontrol noktasıyla tanımlar:

• x1, y1: eğrinin başlangıcını nasıl terk ettiğini belirler
• x2, y2: eğrinin bitişe nasıl yaklaştığını belirler

Y değerleri 1'i geçebilir — bu, hareketin hedefi biraz aşıp geri gelmesi (overshoot) anlamına gelir ve butonlara "canlı" bir his katar.

/* Hafif bir "overshoot" ile buton tıklaması */
.button {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.button:active {
  transform: scale(0.96);
}

Pratik bir kural

Her animasyona özel bir eğri tasarlamak zorunda değilsiniz. Projenizde 2-3 standart eğri belirleyip (örneğin bir "giriş", bir "hover", bir "vurgu" eğrisi) hepsini CSS custom property olarak tanımlamak, hem tutarlılık sağlar hem de bakımı kolaylaştırır:

:root {
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Küçük bir detay gibi görünse de, doğru seçilmiş bir geçiş eğrisi, kullanıcının arayüzü "pahalı" hissetmesinin en ucuz yollarından biridir.