CSS Easing Oluşturucu
Ücretsiz çevrimiçi CSS easing oluşturucu. Etkileşimli eğri üzerinde cubic-bezier kontrol noktalarını sürükleyin, 18 hazır ayardan birini seçin, döngüde oluşan top animasyonunu izleyin ve zamanlama fonksiyonunu anında kopyalayın.
CSS'te easing fonksiyonu nedir?
Easing fonksiyonu bir animasyonun veya geçişin zaman içinde hangi tempoda ilerlediğini denetler. Öğenin sabit hızla hareket etmesi gerekmez: yavaş başlayıp hızlanabilir, hedefi biraz aşabilir ve sonra oturabilir. CSS'te transition-timing-function veya animation-timing-function özelliğiyle ayarlanır.
cubic-bezier() içindeki dört sayı ne anlama gelir?
cubic-bezier(x1, y1, x2, y2) iki kontrol noktasıyla bir eğri tanımlar. İlk nokta hareketin başlangıcını, ikincisi bitişini biçimlendirir. X, 0 ile 1 aralığında zamanı; Y ise ilerlemeyi temsil eder: 0 başlangıç, 1 bitiş değeridir.
Y neden 0 ile 1 dışına çıkabilir de X çıkamaz?
X gerçek zamana eşlenir; 0'ın altında veya 1'in üstünde bir değer zaman nedenselliğini bozar ve şartnamede yasaktır. Y serbesttir: 1 üzerinde hedefi aşar, 0 altında önce geri çekilir — Back hazır ayarlarının zıplama hissi böyle oluşur.
ease, ease-in ve ease-out arasındaki fark nedir?
ease, yumuşak başlangıç ve yumuşak inişli tarayıcı varsayılanıdır; ease-in yavaş başlar hızlı biter; ease-out hızlı başlar ve yavaşlar; ease-in-out ikisini birleştirir. Oluşturucu ayrıca sine, quad, cubic, quart, expo, back ve material hazır ayarlarını da içerir — toplam 18.
Top önizlemesi nasıl çalışır?
İki top, belirlediğiniz süre boyunca döngüde hareket eder. Üstteki top her zaman doğrusal bir fonksiyonla referans olarak ilerler, alttaki sizin eğrinizi izler. Aralarındaki açılıp kapanan mesafe, easinginizin tam olarak neyi değiştirdiğini gösterir.
Üretilen değeri nereye yapıştırırım?
Onu transition-timing-function veya animation-timing-function değeri olarak kullanın; örneğin transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Araç, her kurala doğrudan girebileceğiniz saf cubic-bezier(...) fonksiyonunu verir.
Easing fonksiyonu animasyon performansını etkiler mi?
Zamanlama fonksiyonunun kendisi bedavadır: yalnızca ilerlemeyi zamana yeniden eşler. Performans, hangi özellikleri animasyonla değiştirdiğinize bağlıdır: transform ve opacity GPU dostudur; width veya top gibi düzen özelliklerini animasyonla değiştirmek easing'den bağımsız olarak pahalı reflow'lar yaratır.
Gerçek bir zıplama veya esneklik efekti yapabilir miyim?
Tek bir cubic-bezier bir kez aşabilir ama gerçek bir bounce veya esnek easing'in çoklu zıplamalarını üretemez. Bunun için @keyframes içinde birden çok kareyi zincirleyin veya Web Animations API'yi kullanın; tek seferlik yumuşak aşma zaten cubic-bezier'in iyi yaptığı ve bu aracın odağı olan şeydir.
Burada yaptıklarım bir yere yükleniyor mu?
Hayır. Eğri yerel bir canvas üzerine çizilir ve önizleme animasyonu tamamen tarayıcınızda çalışır. Hiçbir şey sunucuya gönderilmez; araç sayfa yüklendikten sonra çevrimdışı da çalışır.
CSS Easing Oluşturucu Nasıl Kullanılır
Sayıları tahmin etmek yerine CSS easing eğrilerini görsel olarak yontun. Kontrol noktalarını sürükleyin, hareketinizi doğrusal bir referansla karşılaştırın ve hazır cubic-bezier'yi tek tıkla kopyalayın. Her şey tarayıcınızda yerel olarak çalışır.
- Başlangıç noktası olarak Ease Out, Expo Out veya Back Out gibi 18 hazır ayardan birini seçin.
- Eğri üzerindeki iki tutamacı sürükleyin: X ekseni zamandır ve 0 ile 1 arasında kalmalı; Y ekseni ilerlemedir ve aşabilir.
- Hassasiyet gerekirse P1 ve P2 koordinatlarını sayı girişleriyle ince ayar yapın.
- Süre kaydırıcısını ayarlayın ve döngüde uçan iki topu izleyin — oyuk olan hep doğrusaldır, dolu olan sizin eğrinizi kullanır.
- Üretilen cubic-bezier değerini transition-timing-function veya animation-timing-function içine kopyalayın.
Kendinden emin bir aşım için bir Y tutamacını 1'in üstüne itin, örneğin cubic-bezier(0.34, 1.56, 0.64, 1) — hiçbir keyframe olmadan düğme ve kartlara yaylı bir his verir.
İlgili Araçlar
- CSS Gradyan Oluşturucu Görsel olarak muhteşem CSS gradyanları oluşturun. Birden fazla renk durağı, açılar ve konumlarla doğrusal, radyal ve konik gradyanlar oluşturun. Üretime hazır CSS kodunu anında kopyalayın.
- CSS Yükleyici Oluşturucu Ücretsiz CSS yükleyici oluşturucu: saf CSS ile on yükleme spinneri, canlı boyut, hız, kalınlık ve renk ayarı ve yapıştırmaya hazır HTML ile CSS kopyalama.
- Border Radius Oluşturucu Ücretsiz çevrimiçi yaratıcı border radius oluşturucu. 8 kulbu sürükleyin veya bir blob hazır şekli seçin, organik CSS biçimleri oluşturun ve kodu anında kopyalayın.
- Renk Dönüştürücü Ücretsiz çevrimiçi renk dönüştürücü. HEX, RGB, HSL, HSV formatlarını görsel seçici ile anında dönüştürün. %100 gizli, tarayıcınızda çalışır.
- CSS Text Shadow Oluşturucu Ücretsiz çevrimiçi text-shadow oluşturucu. Ofset, bulanıklık, renk ve opaklıkla birden fazla gölge katmanı üst üste dizin, Neon, 3D, Retro hazır ayarlarını deneyin ve CSS'i anında kopyalayın.
- CSS Clip Path Oluşturucu Ücretsiz çevrimiçi CSS clip-path oluşturucu. Sürüklenebilir noktalarla polygon, circle, ellipse ve inset şekilleri tasarlayın, canlı önizleyin ve tek tıkla CSS kodunu kopyalayın.
- CSS Güzelleştirici CSS kodunu anında biçimlendirin ve güzelleştirin. Özelleştirilebilir seçeneklerle sıkıştırılmış CSS'i okunabilir koda dönüştürün.
- CSS Sıkıştırıcı Ücretsiz çevrimiçi CSS sıkıştırıcı. Boşlukları, yorumları ve gereksiz karakterleri kaldırarak CSS kodunu anında sıkıştırın ve optimize edin. Daha hızlı web performansı için dosya boyutunu azaltın.