Varsayılan CSS easing nedir?

Geçişler ve animasyonlar varsayılan olarak ease kullanır; bu da cubic-bezier(0.25, 0.1, 0.25, 1) değerine eşittir: hızlı bir başlangıç ve yumuşak bir bitiş.

Hedefi aşma veya sekme efekti nasıl yapılır?

Bir tutamacı 1'in üstüne veya 0'ın altına sürükleyin. easeOutBack, yani cubic-bezier(0.34, 1.56, 0.64, 1), bitiş noktasını geçip geri yerleşir. Tek bir kübik Bézier eğrisi birden çok kez sekemez; bunun için keyframes veya linear() fonksiyonunu kullanın.

Aynı değeri animasyonlarda da kullanabilir miyim?

Evet. Değer transition-timing-function, animation-timing-function ve Web Animations API'nin easing seçeneğinde çalışır.

Cubic Bezier Oluşturucu

İki tutamacı sürükleyerek CSS easing eğrilerini şekillendirin. Hareketi doğrusal zamanlamayla karşılaştırın ve geçişler ya da Tailwind için cubic-bezier() değerini kopyalayın.

Eğri düzenleyici

Tutamaçlardan birini sürükleyin. Kesikli çizgi doğrusal zamanlamadır.

Hareket önizlemesi

Eğriniz

Doğrusal

Sürenin her onda birindeki konum

transition: transform 1000ms ease;
/* or */
animation-timing-function: ease;

Her şey tarayıcınızda kalır.

Biçim kaynakları

MDN — cubic-bezier()
W3C — CSS Easing Functions Level 1

Araç sayfasının güncellenme tarihi: 2026-10-25

Eğri düzenleyici

Hareket önizlemesi

Kılavuz ve örnek

İlgili araçlar

Biçim kaynakları