CSS Cubic Bezier Jeneratörü
Bir geçiş eğrisi şekillendirmek için iki kolu sürükleyin, sabit bir hıza karşı hareketini izleyin ve cubic-bezier() değerini kopyalayın.
cubic-bezier(0.25, 0.1, 0.25, 1)Eğri doğrudan tarayıcınızda çizilir. Burada yaptığınız hiçbir ayar BroBroGo sunucularına yüklenmez.
SSS
İ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.