Tutamaçları sürükleyerek CSS easing eğrisi şekillendirin ve animasyonu izleyin.
Tutamaçlar 1'in üstüne veya 0'ın altına çıkabilir; bu, animasyonun hedefi aşıp geri yaylanmasını sağlar. Zıplama efekti böyle kurulur.
cubic-bezier(0.25, 0.1, 0.25, 1)
t=0.5 -> 0.802
Adlandırılmış CSS easing'leri ve birkaç faydalı ekstra tek tık uzakta. Linear'dan sürüklemekten daha iyi bir başlangıçtır ve gerçek işlerin çoğu bunlardan birinin küçük bir varyasyonudur.
Yatay eksen zaman, dikey eksen ilerlemedir. Bir tutamacı erkenden yukarı çekmek animasyonu hızlı başlatır; geç yukarı çekmek ise hızlı bitirir.
Önizleme, seçtiğiniz sürede tam olarak sizin eğrinizle oynar; easing'i değerlendirmenin güvenilir tek yolu budur. Doğru hissettiğinde cubic-bezier değerini kopyalayın.
İki kontrol tutamacının koordinatlarıdır: birincisi için x1 ve y1, ikincisi için x2 ve y2. x değerleri zamandır ve 0 ile 1 arasında kalmalıdır; y değerleri ilerlemedir ve dışına çıkabilir.
Bir tutamacı kutunun üstüne sürükleyip y değerini 1'in ötesine çıkarın. Animasyon bitiş noktasını geçip geri oturur; yay hissi veren şey budur.
Çünkü x zamandır. Bu aralığın dışındaki bir değer animasyonun zamanda geriye gitmesi anlamına gelir ki bir zamanlama fonksiyonunun ifade edebileceği bir şey değildir.
İkisi de yavaş başlayıp yavaş biter, ancak ease başta daha hızlı ivmelenir ve geçişlerde tarayıcı varsayılanıdır. ease-in-out simetriktir ve dengeli hissetmesi gereken hareketlere uyar.
Ekrana giren her şey için hızlı başlayıp yavaş biten, ease-out'a yakın bir şey. Öge hemen tepki verip nazikçe oturduğu için duyarlı hissettirir.
Evet. Aynı değer animation-timing-function içine girer ve hem transition hem animation kısayollarında da çalışır.
Evet. Oradaki easing seçeneği aynı cubic-bezier metnini kabul eder, değer değişiklik olmadan taşınır.
Evet, tamamen ücretsiz ve üyeliksiz.
backdrop-filter ile buzlu cam paneller kurun, gerçek zeminlerde önizleyin.
Aracı AçKatmanlı CSS gölgelerini canlı önizlemeyle kurun, sonra düz CSS veya Tailwind değeri olarak kopyalayın.
Aracı AçTailwind çıktısı sunan CSS gradyan oluşturucu. Doğrusal ve radyal gradyanları görsel olarak tasarlayın, üretime hazır CSS veya Tailwind sınıflarını kopyalayın.
Aracı Aç