Cubic Bezier Editörü

Bu araç ne işe yarar?

Cubic Bezier aracı, CSS geçiş ve animasyonlarında kullanılan hızlanma eğrilerini görsel olarak tasarlamanı sağlar. İki kontrol noktasını sürükleyerek eğriyi şekillendirir ve hazır cubic-bezier() değerini anında kopyalarsın. Web tasarımcıları ve frontend geliştiriciler için ideal.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Eğri nasıl çalışır

Eğri, başlangıç (0,0) ve bitiş (1,1) noktaları sabit kalırken iki kontrol noktasıyla şekillenir. P1 (kırmızı) ve P2 (yeşil) noktalarını kaydırıcılarla ayarlarsın; X değerleri 0 ile 1 arasında, Y değerleri ise -1 ile 2 arasında olabilir. Y'yi sınırların dışına taşıdığında animasyon hedefini aşıp geri döner; bu da yaylanma (bounce) etkisi yaratır. Sonuç anında SVG önizlemede ve transition-timing-function satırında görünür.

Hazır şablonlar ve kullanım

ease, ease-in, ease-out, ease-in-out ve linear gibi standart CSS değerlerini tek tıkla yükleyip ince ayar yapabilirsin. Örneğin menü açılışı için ease-out doğal durur, bir butona dikkat çekmek istediğinde bounce-ish (0.68, -0.55, 0.27, 1.55) eğrisi canlı bir his verir. Üretilen değeri transition: transform 0.3s cubic-bezier(...) biçiminde CSS'ine yapıştırman yeterli; aynı değer Framer Motion gibi kütüphanelerde de geçerlidir.

Sıkça sorulan sorular

cubic-bezier() değerlerindeki dört sayı neyi temsil eder?

Sırasıyla iki kontrol noktasının koordinatlarıdır: x1, y1, x2, y2. İlk ikisi P1 noktasını, son ikisi P2 noktasını belirler ve eğrinin hızlanma karakterini tanımlar.

Neden Y değeri 1'den büyük veya 0'dan küçük olabiliyor?

Y ekseni animasyon ilerlemesini gösterir. 1'i aşması hedefi geçip geri dönmesi (overshoot), 0'ın altına inmesi ise önce geri çekilmesi anlamına gelir. Bu da yay ve sıçrama efektleri için kullanılır.