CSS Easing Oluşturucu
Bezier Eğrisi Düzenleyicisi
Animasyon Önizlemesi
Yaygın Easing Efektleri
Ücretsiz çevrimiçi CSS easing oluşturucu. Cubic-bezier eğrileri oluşturmak için kontrol noktalarını sürükleyin. ease, ease-in, ease-out, ease-in-out ve linear için yerleşik ön ayarlar. Gerçek zamanlı animasyon önizleme.
İpuçları ve Püf Noktaları
Kontrol Noktalarını Sürükle
Eğri üzerindeki iki kontrol noktasını (P1, P2) doğrudan sürükleyerek easing eğrisini gerçek zamanlı olarak ayarlayın. X ekseni zaman ilerlemesini, Y ekseni özellik değişimini temsil eder ve eğri eğimi animasyonun hız değişimini belirler.
Canlı Animasyon Önizlemesi
"Animasyonu Oynat"a tıklayarak topun easing fonksiyonunun yörüngesi boyunca nasıl hareket ettiğini görün. İlerleme çubuğu zaman ilerlemesini sezgisel olarak gösterir.
Tek Tıkla Kopyalama CSS
Ayarlama yaptıktan sonra "Kopyala" düğmesine tıklayarak CSS cubic-bezier() kodunu otomatik olarak panonuza kopyalayın, projenize doğrudan yapıştırmaya hazır olun.
Yaygın Kullanım Alanları
Giriş Animasyonları
ease-out
Çıkış Animasyonları
ease-in
Geçişler
ease-in-out
Üzerine Gelme Efektleri
Özel Eğriler
İlerleme Göstergeleri
linear
SSS
cubic-bezier nedir?
cubic-bezier, bir animasyonun hız eğrisini tanımlayan CSS fonksiyonudur ve iki kontrol noktası (P1 (x1, y1) ile P2 (x2, y2)) aracılığıyla üçüncü derece bir Bezier eğrisi ile açıklanır. Eğrinin X ekseni zaman ilerlemesini (0→1), Y ekseni ise özellik değişimini (0→1) temsil eder. Daha dik bir eğri daha hızlı hız anlamına gelir; daha düz bir eğri daha yavaş hız anlamına gelir.
CSS'de özel easing nasıl kullanırım?
CSS transition veya animation özelliklerinde doğrudan kullanın: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);. Oluşturucunun kod çıkış alanı otomatik olarak doğru CSS kodunu üretir. Kopyala'ya tıklayarak doğrudan yapıştırın ve kullanın.
X ve Y için geçerli aralıklar nelerdir?
CSS cubic-bezier(), X değerlerinin 0 ile 1 (başlangıçtan bitişe kadar olan zaman) arasında olmasını gerektirir ve Y değerleri genellikle 0 ile 1 arasındadır ancak (sektirme efektleri oluşturmak için) bu aralığın dışına çıkabilir. Bu araç, oluşturulan eğrilerin geçerli CSS easing fonksiyonları olmasını sağlamak için X'i [0, 1] ve Y'yi [0, 1] ile sınırlar.
Önceden ayarlanmış easing'ler arasındaki fark nedir?
ease: Hızlı sonra yavaş sonra hızlı, genel geçişler için uygundur.
ease-in: Yavaştan hıza, çıkış animasyonları (öğelerin ayrılması) için uygundur.
ease-out: Hızlıdan yavaşa, giriş animasyonları (öğelerin girmesi) için uygundur, en yaygın kullanılan easing'dir.
ease-in-out: Her iki uçta yavaş, ortada hızlı, ease'den daha düzgündür.
linear: Sabit hız, renk değişiklikleri, dönüşler ve hızlanma gerektirmeyen diğer animasyonlar için uygundur.