4 kontrol değeri ile tanımlanan bir eğri — CSS geçişleri ve animasyonları tarafından zaman içindeki değişim oranını kontrol etmek için kullanılır. Tarayıcının 'ease' değeri cubic-bezier(0.25, 0.1, 0.25, 1) şeklindedir.

Aşırı çıkıntı (overshoot) nedir?

Kolaylaştırma eğrisi 0 veya 1'i aştığında (kontrol y-değerleri 1), animasyon bitiş noktalarını 'seker' geçer. Eğlenceli kullanıcı arayüzleri için kullanışlıdır.

Ön ayarlar mevcut mu?

Evet — yaygın ön ayarlar (linear, ease, ease-in, ease-out, ease-in-out) ve birkaç popüler özel eğri bulunur.

Editör ücretsiz mi?

Evet — tamamen ücretsiz, kayıt gerekmez.

Renk ve Tasarım

Kübik Bezier Düzenleyici

Ücretsiz kübik bezier düzenleyici. CSS easing eğrilerini sürükleme tutamaçları, ön ayarlar ve canlı animasyon önizlemesi ile görsel olarak tasarlayın. Geçişler ve animasyonlar için CSS'i kopyalayın.

Runs in your browser

Cubic-bezier editor

x10.25

y10.1

x20.25

y21

CSS

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

Editörün notu

Understanding · Time, but with feeling.

Bu ayrıntılı bölüm şu anda yalnızca İngilizce olarak sunulmaktadır. Yukarıdaki dönüştürme aracı sizin dilinizde çalışır; uzun açıklayıcı yazı henüz çevrilmemiştir.

Sıkça sorulan sorular

Quick answers.

›What's a cubic-bezier?

A curve defined by 4 control values — used by CSS transitions and animations to control the rate of change over time. The browser's 'ease' is cubic-bezier(0.25, 0.1, 0.25, 1).

›What's overshoot?

When the easing curve exceeds 0 or 1 (control y-values < 0 or > 1), the animation 'bounces' past its endpoints. Useful for playful UIs.

›Are presets available?

Yes — common presets (linear, ease, ease-in, ease-out, ease-in-out) plus a few popular custom curves.

›Is the editor free?

Yes — fully free, no signup.

İnsanlar ayrıca şunları arar

İlgili araçlar

More in this room.

Tümünü gör Renk ve Tasarım