CSS Cubic Bezier Easing Jeneratör
Craft CSS metre-bezier kontrol noktaları sürükleyerek eğrileri kiralayın ve kiralama oyununu canlı izleyin, sonra zamanlama fonksiyonunu kopyalayın.
Something went wrong
Drag the control points
Presets
Animation preview
CSS
How to use Cubic Bezier Generator
- Sirkede mavi ve pembe kontrol noktaları sürükleyin veya tip x1, y1, x2, y2 girişlere değer.
- Ortak veya aşırı yükleme eğrisini yüklemek için kolay veya rahat bir geri dönüş gibi bir başlangıç tıklayın.
- Dot animate with your easing, press Play to replay it, then click Copy CSS to catch-bezier rule.
What is Cubic Bezier Jeneratör?
Cubic Bezier Jeneratör CSS kiralama eğrileri için interaktif bir editördür. Bir animasyonun nasıl hızlandığını ve silinmesini şekillendirmek için iki kontrol noktası sürükleyin, o zaman tam cubic-beer() değerleri dört sayısal girişte geri döndürür - veya tip değerler doğrudan ele geçirebilirsiniz.
Control-point Y değerleri 0 ve 1'in ötesine geçebilir, böylece geri dönüşümleri ve geri yüklemeleri bekleyebilirsiniz. Bir yerleşik animasyon önbelleği, eğrinizi transition-timing- function olarak kullanarak takip boyunca otomatik olarak bir değer veya basın oyunu değiştirirsiniz.
Tüm hesaplama tarayıcınızda gerçekleşir. eğri doğru hissettiğinde, CSS'nize hazır zamanlama-işlev çizgisi kopyalayın.
FAQ
- Yastık-bezier() CSS'de ne yapar?
- yastık-bezier() geçişler ve animasyonlar için iki kontrol noktası (x1, y1, x2, y2) kullanarak özel bir kiralama eğrisini tanımlar. O zaman animasyonun hızını kontrol eder, inşa edilen kolaylığın, kolay ve kolay anahtar kelimelerin ötesinde etkileri yaratmanıza izin verir.
- Y değerleri neden 0 veya 1'in altına gidebilir?
- X değerleri 0-1'e yükseltilir, çünkü zaman geriye gidemez, ancak Y değerleri aşırılık ve beklenti oluşturmak için 0-1 aralığı uzatabilir. Bu, 'geri' ve 'bounce' easingleri kısa bir süre önce veya yerleşmeden önce hedeften önce.
- Oluşturulan eğriyi nasıl kullanırım?
- Örneğin, bir geçiş veya animasyon bildirimine küp-bezier() değerini kopyalayın: geçiş: tüm 0.3s metre-bezier(0.42, 0, 0,58, 1); Jeneratör aynı zamanda doğrudan sallayabileceğiniz hazır bir geçiş-işlev-işlev hattı kullanır.
Related tools
- Clip Path Generator
- CSS Gradient Generator
- Box Shadow Generator
- Color Palette Generator
- Keyframes Animation Generator
- CSS Transform Generator
Author
Full-Stack Developer & Tools Architect
Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.
People also use
- CSS Transform Generator🗄️ Developer Tools
Build CSS transforms visually — translate, scale, rotate, skew plus 3D rotateX/Y/Z and perspective. Live preview on a grid and copy the CSS, in-browser.
- Keyframes Animation Generator🗄️ Developer Tools
Build CSS @keyframes animations — fade, slide, bounce, pulse, spin, flip, zoom — tune duration, easing, delay and loop, preview live and copy the CSS.
- Border Radius Generator🗄️ Developer Tools
Visually craft CSS border-radius — independent corners, px/%/em units, and organic blob shapes. Live preview and copy-paste CSS. Runs in your browser.
Last updated: