CSS Kübik Bezier Jeneratörü

Kübik Bezier Belgeleri

Kübik Bezier Eğrisi Nedir?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

CSS Sözdizimi

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Yaygın Kullanım Örnekleri

Animasyonlu Geçişler:Öğeleri değiştiren özellikler için düzgün animasyonlar oluşturun.
Kaydırma Efektleri:Kaydırma animasyonlarının hızını kontrol edin.
İnteraktif Öğeler:Öğelerin fareyle üzerine gelme veya tıklama gibi kullanıcı etkileşimlerine nasıl yanıt vereceğini tanımlayın.
Hareket Tasarımı:UI öğeleri için karmaşık hareket dizileri oluşturun.

Popüler Gevşetme İşlevleri

Ease (default)

Yavaş başlar, hızlı bir şekilde hızlanır ve sonra tekrar yavaşlar.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

Baştan sona sabit hız.

cubic-bezier(0, 0, 1, 1)

Ease-in

Yavaş başlar, sonra hızlanır.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

Hızlı başlar, sonra yavaşlar.

cubic-bezier(0, 0, 0.58, 1)

Özel Eğriler Oluşturmak İçin İpuçları

x değerlerini 0 ile 1 arasında tutun:Bu aralığın dışındaki değerler beklenmeyen davranışlara neden olabilir.
Eğriyi görselleştirin:Değişikliklerin animasyonu nasıl etkilediğini anlamak için etkileşimli grafiği kullanın.
Gerçek öğelerle test edin:Doğru hissettirdiğinden emin olmak için eğrinizi her zaman gerçek UI bileşenleriyle önizleyin.
Ön ayarları kaydet:Gelecekteki projeler için kullanışlı eğrileri yer imlerine ekleyin.