Easy24Easy24
PDFGörselVideoMetinDönüştürÜretHesaplaGeliştiriciGüvenlikZaman

CSS Cubic Bezier

Eğri grafiği, hareket önizlemesi, şablonlar ve transition CSS kopyalama ile cubic-bezier ayarla.

GizliTarayıcıdaAnındaLimitsiz

x1 ve x2 0–1 arasında olmalı. y değerleri zıplama efekti için taşabilir. transition ve animation-timing-function satırları çıktı verir.

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

Eğriyi yeniden şekillendirmek için P1 ve P2 tutamaçlarını sürükle.

Nasıl çalışır

1

Şablon veya ayrıştır seç

ease, ease-in-out, linear veya spring ile başlayın. Düzenlemek için mevcut cubic-bezier() yapıştırın.

2

Kontrol noktalarını ayarla

x1, y1, x2, y2 kaydırıcılarını ayarlayın. Eğri grafiği ve hareketli kutu önizlemesi güncellenir.

3

CSS kopyala

Stil dosyanız için transition ve animation-timing-function parçalarını kopyalayın.

Neden easing eğrileri ayarlansın?

Varsayılan ease anahtar kelimeleri birçok UI için yeterlidir; özel eğriler hareketi markalı hissettirir — hızlı, yumuşak veya oyuncu.

Neden bu araç

  • Etkileşimli easing eğri grafiği
  • Animasyonlu hareket önizlemesi
  • Altı yaygın şablon
  • cubic-bezier yapıştır-ayrıştır
  • Transition süre kontrolü
  • Sınırsız kullanım — günlük limit yok

Sorular

CSS Cubic Bezier ne yapar?

CSS transition ve animasyonlarında kullanılan cubic-bezier easing fonksiyonlarını oluşturmanıza ve önizlemenize yardım eder.

x1 ve x2 neden 0–1 arasında olmalı?

CSS cubic-bezier() spesifikasyonu timing fonksiyonları için kontrol noktası x değerlerini bu aralıkta ister.

y değerleri 1'in üstüne çıkabilir mi?

Evet. 0–1 dışı y değerleri önizlemede taşma veya zıplama benzeri easing oluşturur.

Spring şablonu nedir?

y1'i 1'in üstünde olan, hafif taşmalı yerleşmeyi taklit eden yaygın bir özel eğri.

CSS'im sunucuya gider mi?

Hayır. Oluşturma tamamen bu tarayıcı sekmesinde çalışır.

Günlük limit var mı?

Hayır. Bu oluşturucu ücretsiz planda sınırsızdır.

Easy24 işine yaradıysa kahve ısmarla

Araçlar tarayıcıda ücretsiz kalır. Kreosus üzerinden tek seferlik destek verirsin. Türkiye kartları geçer.

Kahve ısmarla

Benzer Geliştirici araçları

Tümünü gör

JSON Biçimlendirici

Geliştirici

JSON'u tarayıcıda güzelleştir, küçült, doğrula ve anahtarları sırala. 2 veya 4 boşluk girinti, dosya içe aktarma ve indirme.

Aç

Meta Etiket Üretici

Geliştirici

SEO başlık, açıklama, Open Graph, Twitter Card ve canonical etiketlerini canlı sosyal önizleme ile oluştur. Tarayıcıda çalışır.

Aç

CSS Gradyan Oluşturucu

Geliştirici

Doğrusal ve radyal CSS gradyanları tasarla; üç renk durağına kadar. Canlı önizleme, hazır şablonlar, hex girişi, kopyala veya indir.

Aç