CSS animasyonlarında ve geçişlerinde (transitions) hareketin doğallığı, zamanlama fonksiyonları ile belirlenir. CSS Cubic Bezier Jeneratörü, bu zamanlama fonksiyonlarını görsel olarak tasarlamanıza, test etmenize ve doğrudan CSS kodunuzda kullanabileceğiniz değerleri üretmenize olanak tanır. Araç, iki kontrol noktasını sürükleyerek özel geçiş eğrileri oluşturmanızı sağlar.
Eğri doğrudan tarayıcınızda çizilir. Burada yaptığınız hiçbir ayar BroBroGo sunucularına yüklenmez.
CSS Zamanlama Fonksiyonlarının Temelleri
CSS'te transition-timing-function ve animation-timing-function özellikleri, bir animasyonun zaman içindeki ilerleme hızını kontrol eder. Varsayılan olarak sunulan ease, ease-in, ease-out ve ease-in-out gibi anahtar kelimeler, aslında arka planda belirli cubic-bezier() eğrilerini temsil eder.
Bir kübik Bezier eğrisi, dört nokta ile tanımlanır. Bu noktaların ilki başlangıç noktası (0, 0), sonuncusu ise bitiş noktasıdır (1, 1). Bu iki nokta sabit olduğu için, cubic-bezier(x1, y1, x2, y2) fonksiyonu yalnızca hareketin şeklini belirleyen iki kontrol noktasının koordinatlarını parametre olarak alır. Jeneratör üzerindeki kollar sürüklenerek bu kontrol noktalarının konumları değiştirilir ve böylece animasyonun ivmesi hassas bir şekilde ayarlanır.
Kontrol Noktaları ve Değer Sınırları
Eğri, sol alttan (başlangıç) sağ üste (bitiş) doğru uzanır. Zaman soldan sağa doğru ilerlerken, animasyonun fiziksel ilerlemesi aşağıdan yukarıya doğrudur. Kontrol noktalarının koordinatları belirli matematiksel kurallara tabidir:
- X Ekseni Sınırları: Birinci kontrol noktası X ve ikinci kontrol noktası X değerleri zamanı temsil ettiği için mutlaka
0ile1arasında olmalıdır. Zaman geriye doğru akamayacağı için bu sınırların dışına çıkılamaz. - Y Ekseni Sınırları: Birinci kontrol noktası Y ve ikinci kontrol noktası Y değerleri ise animasyonun ilerlemesini temsil eder. Bu değerler
-0.70ile1.70arasında değişebilir. Y ekseninin en alt sınırın altına inmesi veya en üst sınırın üzerine çıkması, animasyonda geri çekilme (pull-back) ve hedefi aşma (overshoot) efektlerinin oluşmasını sağlar.
Araçta sayısal giriş alanları kullanılırken hatalı veya sınır dışı değerlerin girilmesi durumunda otomatik düzeltme kuralları devreye girer:
| Giriş Alanı | Girilen Değer | Kayıp Odak (Blur) Sonrası Durum |
|---|---|---|
| Birinci kontrol noktası X | 9 |
1 değerine yuvarlanır |
| Herhangi bir sayısal alan | Boş bırakma | Önceki geçerli değer geri yüklenir |
| Herhangi bir sayısal alan | Sayısal olmayan karakter | Tam bir değer girilene kadar beklenir |
Ayrıca, bir kontrol noktası koluna odaklanıldığında Sol ok tuşuna basılması, ilgili değeri hassas bir şekilde değiştirerek örneğin 0.99 seviyesine getirebilir.
Önizleme ve Çıktıların Değerlendirilmesi
Arayüzde yapılan her değişiklik, görsel olarak "sizin eğriniz" alanı üzerinde anlık olarak güncellenir. Eğri üzerinde hareket eden bir nokta, tasarlanan geçiş efektini gösterirken; hemen yanında sabit bir hızla (doğrusal/linear) hareket eden başka bir nokta yer alır. Bu karşılaştırma, oluşturulan özel eğrinin hızlanma ve yavaşlama anlarını net bir şekilde görmeyi sağlar.
İstenilen eğri elde edildiğinde, araç cubic-bezier(x1, y1, x2, y2) formatında CSS çıktısı üretir. Değer kopyalandığında arayüzde başarılı kopyalama durumunu belirten bir bildirim görüntülenir.
Hazır Eğri Şablonları
Sıfırdan eğri çizmek yerine, yaygın kullanılan standart geçişler ve özel hareket efektleri için hazır şablonlar seçilebilir:
- Standart CSS Ön Ayarları:
ease,ease-in,ease-outveease-in-out. - Geriye Alarak Giriş (Back In): Animasyon başlamadan önce hafifçe geriye doğru çekilir, ardından hedefe doğru hızlanır.
- Geriye Alarak Çıkış: Animasyon hedefi aşar (overshoot) ve ardından nihai konumuna geri oturur. Bu şablon seçildiğinde araç
cubic-bezier(0.34, 1.56, 0.64, 1)değerini üretir. - Geriye Alarak Giriş-Çıkış: Hem başlangıçta geri çekilme hem de bitişte hedefi aşma efektini bir arada sunar.
Kübik Bezier Eğrilerinin Sınırları
Tek bir cubic-bezier() fonksiyonu oldukça esnek hareketler oluşturabilse de matematiksel yapısı gereği belirli sınırlamalara sahiptir. Bir kübik Bezier eğrisi, animasyon süresince yalnızca tek bir yöne doğru bükülüp ardından durulabilir. Başlangıçta geri çekilme ve bitişte hedefi aşma hareketlerini aynı eğride gerçekleştirebilir ancak yönün birden fazla kez değişmesini gerektiren zıplama (bounce) veya elastik (elastic) salınım efektlerini tek bir cubic-bezier() fonksiyonu ile tanımlamak mümkün değildir.
Sıkça Sorulan Sorular
İki kol ve dört sayı ne anlama geliyor?
Eğri, sol alttan (başlangıç) sağ üste (bitiş) doğru uzanır; zaman soldan sağa, ilerleme ise aşağıdan yukarıya doğrudur. İki kol, eğriyi büken kontrol noktalarıdır — her birinin bir X ve Y değeri vardır, bu nedenle birlikte cubic-bezier(x1, y1, x2, y2) oluştururlar. X her zaman 0 ile 1 arasında kalırken, Y hareketin hedefi aşmasını sağlamak veya durulmadan önce geri çekilmesini sağlamak için üst sınırın üzerine çıkabilir veya alt sınırın altına inebilir.
Bu değeri CSS kodumda nasıl kullanırım?
cubic-bezier() değerini kopyalayın ve bir zamanlama fonksiyonunun (timing function) kullanıldığı her yere yapıştırın — transition-timing-function, animation-timing-function veya shorthand kullanımı, örn: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). ease, ease-in, ease-out ve ease-in-out anahtar kelimeleri sadece sabit cubic-bezier eğrileridir, bu nedenle bu ön ayarlardan birini seçmek size anahtar kelimenin arkasındaki tam değeri gösterir.
Bununla zıplama (bounce) veya elastik efekt yapılabilir mi?
Tek başına yapamaz. Tek bir cubic-bezier önceden hareketlenme ve hedefi aşma (overshoot) yapabilir — "back" ön ayarları tam olarak bunu yapmak için bir kolu kutunun dışına çeker — ancak yalnızca tek bir yönde hareket edip ardından durulabilir. Zıplama (bounce) ve elastik efektler yönü birkaç kez değiştirir, bunu tek bir cubic-bezier ifade edemez; bunlar için CSS keyframes veya çok sayıda durak içeren linear() fonksiyonu gerekir.