Cubic-Bézier Yumuşatma Düzenleyici
Sürüklenebilir bir düzenleyici ve canlı animasyon önizlemesiyle özel cubic-bezier yumuşatma eğrileri tasarlayın.
Yumuşatma eğrisini şekillendirmek için iki tutamacı sürükleyin.
transition-timing-function: —;
animation-timing-function: —;
Her şey tarayıcınızda çalışır — hiçbir şey yüklenmez.
Cubic-Bézier Yumuşatma Düzenleyici Hakkında
Cubic-Bézier Yumuşatma Düzenleyicisi, CSS geçişleri ve animasyonları için özel zamanlama fonksiyonları tasarlar. Eğri tuvalindeki iki kontrol tutamağını sürükleyin ve cubic-bezier(x1, y1, x2, y2) değeri canlı olarak güncellensin; bir animasyon önizlemesi, farkı hissetmeniz için yumuşatmayı doğrusal bir referansın yanında oynatır, ayarlanabilir bir süre ve anında tekrar oynatma ile.
On ön ayar, yaygın kelime dağarcığını kapsar — standart ease, ease-in, ease-out ve ease-in-out, artı bitiş noktalarının ötesine geçen back ve anticipate gibi etkileyici eğriler ve materyal tarzı hızlanma ve yavaşlama rampaları. Bunları olduğu gibi veya kendi eğrinizi sürüklemek için başlangıç noktası olarak kullanın.
Ayrıca tam kontrol noktası koordinatlarını yazabilir, ilham için rastgele düğmesine basabilir ve ham cubic-bezier() değerini veya yapıştırmaya hazır bir CSS kuralını kopyalayabilirsiniz. Düzenleyicinin tamamı tarayıcınızda çalışır.
Cubic-Bézier Yumuşatma Düzenleyici Nasıl Kullanılır
- Yumuşatmayı şekillendirmek için eğri düzenleyicisindeki iki tutamağı sürükleyin.
- Tekrar Oynat'a tıklayın ve gerekirse süreyi ayarlayarak yumuşatılmış animasyonu doğrusal referansla karşılaştırın.
- Hızlı bir başlangıç noktası için ön ayarları — ease, back, anticipate, material ve daha fazlasını — deneyin.
- Tam değerler için sayısal kontrol noktası girdileriyle ince ayar yapın.
- cubic-bezier() değerini veya eksiksiz CSS parçacığını kopyalayın.