CSS Cubic-Bezier Oluşturucu

Bu araç, dört kaydırıcı ile özel bir CSS cubic-bezier() yumuşatma eğrisi şekillendirmenizi ve kodu kopyalamadan önce canlı olarak önizlemenizi sağlar. x1, y1, x2 ve y2 kontrol noktası değerlerini ayarlayın; eğri ve hareket eden bir önizleme öğesi anında güncellensin, ardından transition-timing-function: cubic-bezier(...) kodunu doğrudan stil dosyanıza kopyalayın.

Bu Araç Nedir?

cubic-bezier(), animasyonlu veya geçişli bir değerin sabit bir hızda hareket etmek yerine zaman içinde nasıl hızlanıp yavaşladığını kontrol eden bir CSS zamanlama fonksiyonudur. Sabit bir başlangıç noktası (0,0) ile sabit bir bitiş noktası (1,1) arasında bir eğri büken iki kontrol noktasıyla — (x1, y1) ve (x2, y2) — tanımlanır. x değerleri 0 ile 1 arasında kalmalıdır, ancak y değerleri aşma veya sekme efektleri oluşturmak için bu aralığın dışına çıkabilir.

Ne çok sert ne de çok yumuşak bir his elde etmek için dört ondalık sayıyı elle ayarlamak çok sayıda deneme yanılma gerektirir. Bu araç bu tahmin sürecini doğrudan manipülasyonla değiştirir: bir kaydırıcıyı sürükleyin, eğrinin bükülüşünü ve önizleme topunun buna göre hareketini izleyin ve hareket doğru hissettirdiğinde CSS'i kopyalayın.

Kaynak: CSS Easing Functions Level 1, W3C — cubic-bezier() işlevini ve bu aracın hazır ayarlarının dayandığı beş adlandırılmış anahtar kelimeyi tanımlayan spesifikasyon.

Neden Kullanmalısınız?

Canlı SVG grafiği, eğrinizin sabit başlangıç ve bitiş noktaları arasında tam olarak nasıl büküldüğünü, her iki kontrol noktası ve tutamaçlarıyla birlikte açıkça gösterir.
Oynat düğmesi, bir önizleme öğesini tam olarak eğrinizi kullanarak bir yol boyunca hareket ettirir; böylece hareketi sadece statik bir grafikte görmek yerine hissedersiniz.
CSS Easing Functions spesifikasyonunda belgelendiği gibi beş standart isimli yumuşatma fonksiyonu — ease, ease-in, ease-out, ease-in-out ve linear — için tek tıkla ön ayarlar.
y değerleri 0'ın altına inebilir veya 1'in üzerine çıkabilir, bu da isimli anahtar kelimelerin üretemeyeceği aşma/sekme tarzı yumuşatmalar oluşturmanıza olanak tanır.
Doğrudan yapıştırılmaya hazır transition-timing-function CSS'i üretir — aynı değer animation-timing-function için de çalışır.
Tamamen tarayıcınızda çalışır — yapılandırdığınız hiçbir şey hiçbir yere yüklenmez. Ücretsiz, kayıt gerektirmez.

Nasıl Kullanılır

Animasyonun başlangıcını şekillendiren ilk kontrol noktasını ayarlamak için x1/y1 kaydırıcılarını sürükleyin.
Animasyonun bitişini şekillendiren ikinci kontrol noktasını ayarlamak için x2/y2 kaydırıcılarını sürükleyin.
Grafikteki siyah eğriyi izleyin — başlangıçta köşegenin üzerinde şişkinlik varsa hareket hızlı başlar, altında kalıyorsa yavaş başlar.
Eğrinizi transition-timing-function olarak kullanarak bir önizleme öğesinin yol boyunca hareket ettiğini görmek için Oynat'a tıklayın.
Başlangıç noktası olarak bir ön ayar deneyin (ease, ease-in, ease-out, ease-in-out, linear), ardından kaydırıcıları oradan ince ayar yapın.
Oluşturulan CSS'i kopyalayıp bir transition veya animation kuralına yapıştırın.

Örnek

Giriş

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Çıkış

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Bu, standart CSS ease anahtar kelimesinin açık kontrol noktaları olarak yazılmış hali — hızlı bir başlangıç, ardından sona doğru kademeli bir yavaşlama.

y değerleri neden 0–1 aralığını aşabilir

Zamanı temsil eden ve 0'dan 1'e kadar gitmesi gereken x ekseninin aksine, y ekseni animasyonlu değerin ilerlemesini temsil eder ve böyle bir sınırı yoktur. y1'i 0'ın altına veya y2'yi 1'in üzerine ayarlamak, eğrinin başlangıç değerinin ötesine düşmesine veya yerleşmeden önce bitiş değerini aşmasına neden olur — bu, buton basma geri bildirimlerinde, modal açılışlarında ve eğlenceli mikro etkileşimlerde kullanılan aşma ve öngörü efektlerinin temelidir. Beş isimli anahtar kelimeden (ease, ease-in, ease-out, ease-in-out, linear) hiçbiri bunu üretemez; bunun için özel bir cubic-bezier() gerekir.

transition-timing-function ile animation-timing-function karşılaştırması

Bu aracın ürettiği cubic-bezier() değeri her iki özellikte de aynı şekilde çalışır. Hareket bir durum değişikliğiyle (hover veya sınıf değişimi gibi) tetiklendiğinde transition-timing-function'ı, aynı hissin otomatik olarak veya döngü halinde uygulanması gerektiğinde @keyframes tabanlı bir animasyon kuralı içinde animation-timing-function'ı kullanın.

Yaygın yumuşatma desenleri

Keskin arayüz geri bildirimi (butonlar, anahtarlar): kontrol noktalarını köşegene yakın tutup hafif bir ease-out eğilimi verin, örneğin cubic-bezier(0.4, 0, 0.2, 1).
Material Design'ın standart eğrisi: cubic-bezier(0.4, 0, 0.2, 1) — hızlı başlangıç, yumuşak bitiş; panel ve kart geçişlerinde yaygın olarak kullanılır.
Sekme/aşma: y2'yi 1'in üzerine çıkarın, örneğin cubic-bezier(0.34, 1.56, 0.64, 1), eğlenceli bir belirme hissi için.
Harekete öngörü katmak: y1'i 0'ın altına indirin, böylece öğe ileri hareket etmeden önce hafifçe geri çekilsin.
Döngüsel animasyonlar için pürüzsüz ease-in-out: eğriyi merkeze göre neredeyse simetrik tutun.

Diğer CSS araçlarıyla eşleştirme

Bir yumuşatma eğrisi nadiren tek başına kullanılır — genellikle gölgelere, yuvarlatılmış köşelere veya gradyanlara da ihtiyaç duyan bir öğeye uygulanır. Aşağıdaki diğer CSS araçlarıyla görsel stili oluşturun, ardından bu aracın ürettiği zamanlama fonksiyonunu aynı kurala veya transition/animation bildirimine ekleyin.

→ Kutu Gölgesi Oluşturucu · Kenar Yarıçapı Oluşturucu

Sıkça Sorulan Sorular

cubic-bezier() içindeki dört sayı gerçekte ne anlama gelir?

Bunlar, sabit bir başlangıç noktası (0,0) ile sabit bir bitiş noktası (1,1) arasında giden bir Bézier eğrisini büken iki kontrol noktasının, (x1, y1) ve (x2, y2), koordinatlarıdır. x ekseni geçen zamanı (0'dan 1'e) temsil eder, y ekseni ise animasyonlu özelliğin ne kadar ilerlediğini temsil eder; bu yüzden x1 ve x2 0–1 aralığında kalmalı, y1 ve y2 ise bu aralığın dışına çıkabilir.

ease, ease-in, ease-out ve ease-in-out arasındaki fark nedir?

ease (CSS'nin varsayılan değeri) hızlı başlar, ardından yumuşakça yavaşlar. ease-in yavaş başlar ve sona doğru hızlanır; ekrandan çıkan öğeler için kullanışlıdır. ease-out hızlı başlar ve yavaşlar; ekrana giren öğeler için kullanışlıdır. ease-in-out her iki uçta da yavaş, ortada daha hızlıdır ve pürüzsüz, simetrik bir his verir.

Aynı cubic-bezier() değerini hem geçişler hem de animasyonlar için kullanabilir miyim?

Evet. transition-timing-function ve animation-timing-function tamamen aynı cubic-bezier() sözdizimini kabul eder ve aynı yumuşatma eğrisini üretir — tek fark, bu zamanlama fonksiyonunun hangi CSS özelliğine (bir transition'a mı yoksa keyframes animasyonuna mı) bağlı olduğudur.

y1 veya y2 çok büyük ya da negatif olduğunda eğrim neden garip görünüyor?

Bu beklenen bir durumdur — y değerlerini 0–1 aralığının çok dışına itmek, animasyonlu değerin yerleşmeden önce hedefini önemli ölçüde aşmasına neden olan güçlü bir aşma efekti yaratır. Bu geçerli ve genellikle kasıtlı bir efekttir, ancak istenmiyorsa y1 ve y2'yi 0–1 aralığına daha yakın bir yere geri getirin.

Özel bir eğri, sadece isimli anahtar kelimeleri kullanmaktan daha mı iyidir?

Mutlaka değil — beş anahtar kelime (ease, ease-in, ease-out, ease-in-out, linear) günlük ihtiyaçların çoğunu karşılar ve kodda okunması daha kolaydır. Sekme, daha keskin bir çıtırtı veya belirli bir tasarım sisteminin hareket spesifikasyonuna uyum gibi anahtar kelimelerin sunmadığı belirli bir his gerektiğinde özel bir cubic-bezier()'e başvurun.