CSS Hızlandırma ve Geçiş Üreteci
Görbe ön ayarından veya özel cubic-bezier noktalarından bir CSS geçiş kuralı oluşturun, hareketin metin grafiğiyle.
CSS Hızlandırma ve Geçiş Üreteci
Animasyonlanacak özellikleri seçin, süreyi ve gecikmeyi ayarlayın, bu araç sizin için geçiş kuralını oluşturacak — sade CSS olarak veya tailwind.config.js dosyasına yapıştırabileceğiniz bir Tailwind config bloğu olarak. Yaygın adlandırılmış eğrileri (linear, ease, ease-in, ease-out, ease-in-out) ve ease-out-back eğrisini kapsar — bu hedefini geçmeden önce — ki bu yerel bir CSS anahtar sözcüğü değildir ve her zaman tam cubic-bezier() işlevi olarak yazılmalıdır.
Oluşturulan kuralın altında, bir metin grafiği eğrinin zamandaki her noktadaki ilerlemesini çizer — animasyonun başında 0'dan sonuna kadar 1'e, her örnek için bir çubukla, böylece geliştirici araçlarını açmadan hızlandırmayı ve fazlalığı görebilirsiniz. "Özel cubic-bezier()" öğesine geçin ve sizin dört kontrol noktanız girin, birisinin size verdiği bir eğriyi veya tasarım aracından kopyaladığınız eğriyi görmek için; birinci ve üçüncü noktalar zaman ekseninde 0–1 arasında kalmalıdır (bu bir CSS gereksinimdir), ancak y değerleri 0–1 dışına çıkabilir, bu tam olarak yükseltme ve geri animasyonların nasıl çalıştığıdır.
Özellikleri alanı virgülle ayrılmış bir liste alır — transform, opacity, background-color veya --panel-width gibi bir CSS özel özelliği — ve araç özellik başına bir satır yazar, böylece kural taranması kolay kalır. Süre ve gecikme milisaniye cinsindendir; grafik satırlarının sayısı, eğrinin daha kaba veya daha ince bir şekilde okunması için 2'den 41'e ayarlanabilir.
Her şey tarayıcınızda yerel olarak çalışır: girdiğiniz hiçbir şey başka bir yere gönderilmez. Sonucu kopyalayın, metin dosyası olarak indirin veya çıktıyı doğrudan giriş kutusuna geri gönderin ve daha fazla ayarlama yapın.