Nasıl kullanılır?
- Grafikte Kontrol noktası 1 ya da Kontrol noktası 2 değerini sürükleyin. Bir noktaya tıklayıp ok tuşlarıyla küçük adımlar atabilirsiniz; daha büyük adımlar için Shift tuşunu basılı tutun.
- Daha kesin bir eğri istiyorsanız değerleri x1 (0 ile 1 arası), y1, x2 (0 ile 1 arası) ve y2 alanlarına yazın. x değerleri 0 ile 1 arasında kalmalıdır.
- ease-in-out gibi bir hazır ayar seçin ya da Animasyon önizlemesi altındaki Oynat düğmesine basarak topun eğriyi izlediğini görün.
- CSS tanımını kopyalayıp bir geçiş ya da animasyonda kullanın.
Dört sayı ne anlama gelir?
Bir cubic Bézier geçiş eğrisi (0, 0) noktasında başlar ve (1, 1) noktasında biter. İki kontrol noktası, (x1, y1) ve (x2, y2), şeklini belirler. Yatay eksen geçen sürenin payını, dikey eksen yapılan değişimin payını gösterir. CSS Easing Functions belirtimi kontrol noktalarının x değerlerini 0 ile 1 arasına sınırlar; çünkü zaman geriye akamaz ve sonun ötesine geçemez.
y değerlerinin böyle bir sınırı yoktur. 1'in üstünde ya da 0'ın altında bir y değeri eğriyi aşırıya taşırır; değişim sonunu geçip geri döner ya da ters yönde hareketle başlar.
cubic-bezier(x1, y1, x2, y2), burada x1 ve x2 değerleri 0 ile 1 arasındadırHazır ayarlar ve animasyon
ease anahtar sözcüğü cubic-bezier(0.25, 0.1, 0.25, 1), ease-in cubic-bezier(0.42, 0, 1, 1), ease-out cubic-bezier(0, 0, 0.58, 1) ve ease-in-out cubic-bezier(0.42, 0, 0.58, 1) değerlerine karşılık gelir; belirtim bu değerleri verir. linear geçişi düz bir çizgidir ve cubic-bezier(0, 0, 1, 1) eğrisi de aynı çizgiyi çizer.
Top, eğriyi bir animasyonun zamanlaması olarak izler; böylece geçişi hareket olarak görürsünüz. Cihazınız azaltılmış hareket istiyorsa animasyon duraklı başlar ve Oynat ile çalıştırılır.
- Sayfaya gelen bir öğe için ease-out gibi yumuşak bir eğri, sayfadan çıkan bir öğe için ease-in kullanın.
- Geçişi kısa tutun; böylece eğri hissedilir, beklenmez.
Örnek: sürenin yarısındaki ilerleme
ease-in-out eğrisi, cubic-bezier(0.42, 0, 0.58, 1), merkezine göre simetriktir; bu yüzden sürenin yarısında değişimin tam yarısını yapmış olur ve okuma alanı 0,5000 gösterir.
ease eğrisi, cubic-bezier(0.25, 0.1, 0.25, 1), aynı noktada daha ileridedir. Sürenin yarısında değişimin 0,8024'ünü yapmış olur; yani başta hızlı ilerler ve sonda yavaşlar.
Sık sorulan sorular
Top neyi gösteriyor?
Top, izin sol ucundan sağ ucuna doğru hareket eder ve konumu eğriyi izler: yatay konum, o ana kadar yapılan değişimin payıdır. Eğri 1'in üstüne çıktığında top izin sonunu geçer ve orada kırpılır.
x değerleri neden 0 ile 1'in dışına çıkamaz?
Yatay eksen zamandır ve eğri başlangıçtan bitişe kadar olan zamanı kapsar. Başlangıçtan önceki ya da bitişten sonraki bir zamanın eğride yeri yoktur; bu yüzden belirtim kontrol noktalarının x değerlerini 0 ile 1 arasında tutar. y değerlerinin böyle bir sınırı yoktur.
ease-in ile ease-out arasındaki fark nedir?
ease-in yavaş başlar ve sona doğru hızlanır; ease-out hızlı başlar ve sonda yavaşlar. İki eğri birbirinin ayna görüntüsüdür; aynı değişim ters yönde okunur.
Değeri hem geçişte hem animasyonda kullanabilir miyim?
Evet. Aynı cubic-bezier() değeri, transition-timing-function olduğu gibi animation-timing-function özelliğinde de çalışır; tanımı iki yerde de kullanabilirsiniz.
Sürüklediğim ya da yazdığım bilgiler saklanıyor ya da sunucuya gönderiliyor mu?
Hayır. Eğri ve animasyon tarayıcınızda çalışır. Hiçbir şey saklanmaz ya da sunucumuza gönderilmez; bu yüzden sayfadan ayrılmadan önce tanımı kopyalayın.
Kaynaklar
- W3C: CSS Easing Functions Level 1, cubic Bézier easing functions (İngilizce)
- MDN: transition-timing-function (İngilizce)
Rakamlar ve metin en son 10 Kasım 2026 Salı tarihinde kontrol edildi.