CSS için özel bir kübik-bezier yumuşatma eğrisini nasıl oluştururum?

Grafikteki iki kontrol noktası tutamacını sürükleyin, tam x1, y1, x2, y2 değerlerini yazın veya bir ön ayar seçin. Ardından Çıktı biçimi altından CSS'i seçin ve transition-timing-function için kullanılacak cubic-bezier() değerini almak üzere Kopyala düğmesine tıklayın.

Cubic-bezier ile bir sıçrama veya aşma efekti nasıl yaparım?

Bir tutamacı kutunun üstüne veya altına sürükleyerek Y değerinin 0-1 aralığını aşmasını sağlayın. X 0 ile 1 arasında kalırken Y bu aralığı aşabilir. Geri çıkış ve öngörü ön ayarları, kullanıma hazır aşma başlangıç noktalarıdır.

Tailwind, Framer Motion veya anime.js için yumuşatma değerini alabilir miyim?

Evet. Çıktı biçimi sekmeleri CSS, Tailwind, Framer Motion ve anime.js şeklindedir. Hepsi aynı dört sayıyı biçimlendirir; bu nedenle bir sekme seçin ve kodu panonuza almak için Kopyala düğmesine tıklayın.

Düzenlemek için mevcut bir cubic-bezier değerini nasıl yüklerim?

cubic-bezier(.17, .67, .83, .67) gibi bir değeri içe aktarma kutusuna yapıştırın ve Yükle düğmesine tıklayın. Dört sayı okunamazsa bir hata mesajı alırsınız. Eğri ayrıca sayfa URL'sinde diyez işaretinden sonra saklanır, böylece paylaşılabilir.

Önizleme neden gerçek geçişlerimden daha yavaş geliyor?

Hareket önizlemesi, değiştirebileceğiniz bir Süre ayarı kullanır ve varsayılanlar, eğriyi inceleyebilmeniz için daha yavaştır. Süreyi kısaltın, ardından hareketi yayınlamayı planladığınız hızda görmek için Tekrar oynat seçeneğini kullanın.

Gerçekten ücretsiz mi?

Evet. Tüm araçlar ücretsizdir; hesap veya kredi kartı gerekmez. İşlem sunucularımızda değil cihazınızda yapılır ve araçları ücretsiz sunabilmemizi sağlayan da budur.

Mobilde çalışır mı?

Evet. iOS ve Android'in güncel mobil tarayıcılarında, hiçbir şey kurmadan çalışır.

📈

Ücretsiz CSS Kübik-Bezier Yumuşatma Oluşturucu

Kontrol noktalarını sürükleyerek CSS yumuşatma eğrileri tasarlayın, hareketi canlı önizleyin ve cubic-bezier() değerini kopyalayın. Aşma/sekme ön ayarları içerir.

Tarayıcınızda çalışırKayıt yok, açılır pencere yokGiriş gerekmezSonsuza kadar ücretsiz

Yüklendikten sonra çevrimdışı çalışır

Eğriyi şekillendirmek için turkuaz ve gül kırmızısı tutamaçları sürükleyin

Kontrol noktaları

x1y1x2y2

Hareket önizlemesi

Süre1,6sn

Genişlik geçişi

CSS değeri

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Ön ayarlar

Gül kırmızısı ve turkuaz tutamaçlar kutunun üstüne veya altına çekilebilir (Y, 0-1 dışına çıkabilir). Bu sayede back-out ve anticipate gibi aşım/zıplama efektleri oluşturulur. X 0-1 aralığında kalır (zaman geri gidemez).

Yaygın kullanımlar

Özel CSS Geçiş EasingHover efektleri, menüler ve UI geçişleri için doğal hissedilen easing tasarla.
Sıçrama ve Aşırı Geçiş AnimasyonlarıKontrol noktalarını kutudan ötesine çekerek oyuncu yay/sıçrama hareketi oluştur.
@keyframes Animasyonları için EasingCSS keyframe animasyonları için doğru animation-timing-function seç.
JS Animasyon Kütüphaneleri için Easing DeğerleriGSAP, Framer Motion, anime.js ve daha fazlası için cubic-bezier değerleri al.
Easing Nasıl Çalışır AnlaBezier eğrisi ile ürettiği hareket arasındaki ilişkiyi gör.

Nasıl çalışır

Düzenleyici tamamen tarayıcıda React durumu ve SVG kullanılarak oluşturulmuştur — eğri matematiğini hiçbir kütüphane yapmaz. Sürüklenebilir iki kontrol noktası bir SVG kübik Bezier yolunu tanımlar ve tarayıcının kendi CSS animasyon motoru, ortaya çıkan cubic-bezier() değerini doğrudan bir @keyframes kuralına enjekte ederek hareket önizlemesini çalıştırır.

1
Kontrol noktalarını sürükleyin veya yazın
İki tutamaç (turkuaz P1, gül kırmızısı P2) bir SVG tuvalinde durur. Sürükleme, setPointerCapture ile Pointer Events API'yi kullanır; böylece tutamaç SVG sınırının dışında bile parmağınızı veya imlecinizi izler. Tutamaçları ok tuşlarıyla da kaydırabilir veya x1/y1/x2/y2 sayı girişlerine tam değerler yazabilirsiniz.
2
SVG eğriyi gerçek zamanlı çizer
Eğri, C (kübik Bezier) komutu her durum güncellemesinde dört kontrol noktası koordinatından yeniden hesaplanan tek bir SVG <path> öğesidir. Canvas yok, harici kütüphane yok — yolu doğrudan tarayıcının SVG çizicisi çizer.
3
Tarayıcının CSS motoru yumuşatmayı önizler
Üç canlı animasyon (kayan bir nokta, bir genişlik geçişi ve bir ölçekleme), cubic-bezier() değeri satır içi enjekte edilmiş CSS @keyframes çalıştırır. Eğriyi tarayıcının kendi animasyon motoru yorumlar; bu yüzden gördüğünüz, üretim CSS'inizin tam olarak üreteceği şeydir.
4
Parçacığı çerçevenizin sözdiziminde kopyalayın
Sekmeler aynı dört sayıyı bir CSS transition-timing-function, bir Tailwind keyfi değer sınıfı, bir Framer Motion ease dizisi veya bir anime.js yumuşatma dizesi olarak biçimlendirir. Parçacık navigator.clipboard ile panoya yazılır. Eğri ayrıca URL hash'ine (#b=x1,y1,x2,y2) kodlanır; böylece paylaşabilir veya yer imlerine ekleyebilirsiniz.