·web
Cubic-Bezier Tester
Cubic bezier eğrisini iki kontrol noktası ile şekillendir, timeline'ı scrub et, easing'in zamanı *nasıl* distorte ettiğini gör. CSS değerini kopyala, bitti.
css · animation · easing
Cubic bezier eğrisini iki kontrol noktası ile şekillendir, timeline'ı scrub et, easing'in zamanı *nasıl* distorte ettiğini gör. CSS değerini kopyala, bitti.
css · animation · easing
ease-in-out mu yeter? Yoksa cubic-bezier(0.68, -0.55, 0.27, 1.55) mı lazım? cubic-bezier.com güzel ama görsel feedback'i sınırlı. Bu lab eğriyi + zaman çizgisinde hareket eden noktayı yan yana gösterir, easing'in zamanı nasıl bozduğunu hissettirir.
cubic-bezier(0.400, 0.000, 0.200, 1.000)linear easing — zaman ilerlemesi = animasyon ilerlemesilinear'dan ne kadar saparsa, easing o kadar belirginovershoot ve undershoot. Örneğin cubic-bezier(0.68, -0.55, 0.27, 1.55):
y1 = -0.55 → animasyon başlangıçta geri gider (rebound effect)y2 = 1.55 → animasyon hedefin ötesine geçer sonra geri dönerBu "bouncy" / "spring" hissini yaratır. Mobil OS'lerin overshoot animasyonları bu mantıkla.
.element {
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}Veya animation timing function olarak:
@keyframes slide-in {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.element {
animation: slide-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}| Preset | Değer | Hisset |
|---|---|---|
linear | (0, 0, 1, 1) | Robotik |
ease | (0.25, 0.1, 0.25, 1) | Default — dengeli |
ease-in | (0.42, 0, 1, 1) | Yavaş başlar |
ease-out | (0, 0, 0.58, 1) | Hızlı başlar, yavaş biter (UI için ideal) |
ease-in-out | (0.42, 0, 0.58, 1) | Her iki ucu yumuşak |
| Material standard | (0.4, 0, 0.2, 1) | Google Material guide |