CSS Cubic Bezier

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

GizliTarayıcıdaAnındaLimitsiz

cubic-bezier yapıştır

x1: 0.25

y1: 0.10

x2: 0.25

y2: 1.00

Önizleme süresi 1.0s

CSS çıktısı

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

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.

Easing eğrisi

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

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

Hareket önizlemesi

Nasıl çalışır

Ş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.

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.

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. CSS Cubic Bezier, Easy24’ün geliştirici araçlarından biridir. Normal kullanımda girdin bu sekmede kalır; Easy24 bu içeriği işlemek için yüklemez. Bu aracın günlük ücretsiz plan tavanı yoktur; istediğin kadar kullan. Tipik akış: Şablon seç veya dört kontrol değerini ayarla, hareketi önizle, transition ve timing-function CSS kopyala. Takip adımı yaygınsa sayfada ilgili araçlar ve ters dönüşümler görünür.

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.

Easy24 işine yaradıysa kahve ısmarla

Araçlar ücretsiz kalır. Teşekkür etmek istersen tek seferlik bağış yapabilirsin.

Kahve ısmarla

CSS Cubic Bezier ne zaman kullanılır

İnsanlar CSS Cubic Bezier aracına, hızlı bir iş için masaüstü yazılım kurmak veya hesap açmak istemediklerinde gelir. Eğri grafiği, hareket önizlemesi, şablonlar ve transition CSS kopyalama ile cubic-bezier ayarla. Çıktıyı düzenleyicinize kopyalayın; normal kullanımda arka uç turu gerekmez. Arama sonuçları yükleme tabanlı dönüştürücülerle yerel araçları karıştırır. Hangi modeli kullandığınızı bilmek için bu sayfadaki gizlilik notunu okuyun. Easy24’te bu aracın normal kullanımı işlemeyi tarayıcınızda tutar. Yapıştırdığınız içerik veya seçtiğiniz dosyanın işi bitirmek için yüklenmesi gerekmez. Bu sayfanın günlük ücretsiz plan tavanı yoktur; istediğiniz kadar çalıştırabilirsiniz. Hesaplar, reklamlar ve Pro hakkında ürün geneli sorular için site SSS ve Güvenlik sayfalarına bakın. Bu aracın net adımları için yukarıdaki rehber bloklarını kullanın. Easy24’te araç sayfaları İngilizce ve Türkçe senkron tutulur; davranış aynı kalır.

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ç