〰️ CSS Cubic-Bezier Visualizer

Create CSS cubic-bezier easing curves with a visual editor. Drag control points and preview animation in real time. Copy the CSS transition value. Free cubic-bezier generator.

P1 X

P1 Y

P2 X

P2 Y

CSS Value

How to Use

Drag the control points

Click and drag the two colored handles on the SVG canvas to define your easing curve shape.

Preview the animation

Click Play to see a box animate using your cubic-bezier curve. Try preset buttons for common easings.

Copy the function

Click Copy to copy the cubic-bezier() value. Use it in your CSS transition or animation.

Frequently Asked Questions

What is cubic-bezier in CSS? +

cubic-bezier() is a CSS timing function that controls the speed curve of transitions and animations. It takes four values (P1x, P1y, P2x, P2y) that define two control points of a Bézier curve between (0,0) and (1,1).

What do the four values in cubic-bezier mean? +

The four values are x1, y1, x2, y2 — the coordinates of two control points. x values must be between 0 and 1 (they represent time). y values can be outside 0–1, which creates bounce or overshoot effects.

What are the built-in CSS easing functions? +

ease is cubic-bezier(0.25,0.1,0.25,1). ease-in is cubic-bezier(0.42,0,1,1). ease-out is cubic-bezier(0,0,0.58,1). ease-in-out is cubic-bezier(0.42,0,0.58,1). linear is cubic-bezier(0,0,1,1).

How do I create a bounce animation with cubic-bezier? +

Set y values outside the 0–1 range to create overshoot. For example, cubic-bezier(0.34,1.56,0.64,1) creates a spring-like bounce where the element overshoots and settles back.

Where can I use cubic-bezier in CSS? +

Use it in the transition-timing-function or animation-timing-function properties. Example: transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94).

Tam Rehber: CSS Cubic-Bezier Editörü

Her CSS geçişi ve animasyonu, değişimin zaman içindeki hızını kontrol eden bir zamanlama fonksiyonuna sahiptir. cubic-bezier() fonksiyonu bu hız üzerinde hassas kontrol sağlar; ease veya ease-in-out gibi adlandırılmış anahtar kelimelerden çok daha fazlasını ifade edebilirsiniz.

Dört Kontrol Noktasını Anlamak

cubic-bezier(x1, y1, x2, y2) her zaman (0,0)'dan başlar ve (1,1)'de biter. X ekseni zamanı (0=başlangıç, 1=bitiş), Y ekseni ilerlemeyi temsil eder. Dik eğim hızlı değişimi, yatay eğim yavaş değişimi, köşegen düz çizgi ise sabit hızı gösterir.

Adlandırılmış Fonksiyonların cubic-bezier Karşılıkları

linear = cubic-bezier(0, 0, 1, 1)
ease = cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in = cubic-bezier(0.42, 0, 1, 1)
ease-out = cubic-bezier(0, 0, 0.58, 1)
ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)

ease-in ve ease-out: UX Farkı

ease-in yavaş başlar, hızlı biter — ekrandan çıkan öğeler için kullanın. ease-out hızlı başlar, yavaş biter — ekrana giren öğeler için idealdir. ease-in-out, görünüm alanı içinde durum değiştiren öğelere (akordiyon açılması, geçiş düğmesi) uygundur.

Aşım: 1'den Büyük Y Değerleri

/* Sekme aşım efekti */
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

Y ekseni 1'i aşarak veya 0'ın altına inerek animasyonun hedef değerini geçici olarak aşmasını sağlar — bu sekme veya elastik efekti yaratır.

Sprite Animasyonları için steps()

.sprite {
  animation: yuruyus 0.5s steps(8) infinite;
}
@keyframes yuruyus {
  to { background-position: -800px 0; }
}

Bu zamanlama fonksiyonlarını kullanan spinner ve yükleyiciler için CSS Yükleyici aracına, geçişlerinizi tamamlayan box shadow efektleri için Box Shadow Oluşturucu'ya bakın.