मैं CSS के लिए कस्टम क्यूबिक-बेज़ियर इज़िंग कर्व कैसे बनाऊँ?

ग्राफ़ पर दो नियंत्रण बिंदु हैंडल खींचें, सटीक x1, y1, x2, y2 मान टाइप करें, या एक प्रीसेट चुनें। फिर आउटपुट प्रारूप के अंतर्गत CSS चुनें और transition-timing-function के लिए cubic-bezier() मान प्राप्त करने के लिए कॉपी करें पर क्लिक करें।

मैं क्यूबिक-बेज़ियर के साथ बाउंस या ओवरशूट प्रभाव कैसे बनाऊँ?

किसी हैंडल को बॉक्स के ऊपर या नीचे खींचें ताकि उसका Y मान 0-1 से आगे चला जाए। Y उस सीमा को पार कर सकता है, जबकि X 0 और 1 के बीच रहता है। बैक-आउट और एंटीसिपेट प्रीसेट तैयार ओवरशूट शुरुआती बिंदु हैं।

क्या मुझे Tailwind, Framer Motion या anime.js के लिए इज़िंग मिल सकती है?

हाँ। आउटपुट प्रारूप टैब CSS, Tailwind, Framer Motion और anime.js हैं। वे सभी समान चार संख्याओं को प्रारूपित करते हैं, इसलिए एक टैब चुनें और स्निपेट को अपने क्लिपबोर्ड पर रखने के लिए कॉपी करें पर क्लिक करें।

मैं संपादित करने के लिए मौजूदा क्यूबिक-बेज़ियर मान कैसे लोड करूँ?

आयात बॉक्स में cubic-bezier(.17, .67, .83, .67) जैसा मान पेस्ट करें और लोड करें पर क्लिक करें। यदि चार संख्याएँ नहीं पढ़ी जा सकती हैं, तो आपको एक त्रुटि संदेश मिलता है। वक्र हैश के बाद पृष्ठ URL में भी संग्रहीत होता है, इसलिए इसे साझा किया जा सकता है।

पूर्वावलोकन मेरे वास्तविक ट्रांज़िशन से धीमा क्यों लगता है?

मोशन पूर्वावलोकन एक अवधि सेटिंग का उपयोग करता है जिसे आप बदल सकते हैं, और डिफ़ॉल्ट धीमे होते हैं ताकि आप वक्र का अध्ययन कर सकें। अवधि को छोटा करें, फिर उस गति से मोशन देखने के लिए रीप्ले का उपयोग करें जिस पर आप शिप करने की योजना बना रहे हैं।

क्या यह सच में मुफ़्त है?

हाँ। हर टूल मुफ़्त है, बिना किसी खाते या क्रेडिट कार्ड के। काम हमारे सर्वर के बजाय आपके डिवाइस पर होता है, जिससे इसे चलाना मुफ़्त रहता है।

क्या यह मोबाइल पर काम करता है?

हाँ। यह iOS और Android के मौजूदा मोबाइल ब्राउज़र में चलता है, कुछ इंस्टॉल करने की ज़रूरत नहीं।

📈

मुफ़्त CSS क्यूबिक-बेज़ियर इज़िंग जेनरेटर

नियंत्रण बिंदुओं को खींचकर CSS ईज़िंग कर्व डिज़ाइन करें, गति का लाइव पूर्वावलोकन देखें, और cubic-bezier() मान कॉपी करें। ओवरशूट/बाउंस प्रीसेट शामिल हैं।

आपके ब्राउज़र में चलता हैकोई साइन-अप नहीं, कोई पॉप-अप नहींकोई लॉगिन आवश्यक नहींहमेशा के लिए मुफ़्त

लोड होने के बाद ऑफ़लाइन काम करता है

कर्व को आकार देने के लिए टील और गुलाबी हैंडल खींचें

नियंत्रण बिंदु

x1y1x2y2

मोशन पूर्वावलोकन

अवधि1.6 से

चौड़ाई ट्रांज़िशन

CSS मान

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

प्रीसेट

गुलाबी और टील हैंडल बॉक्स के ऊपर या नीचे जा सकते हैं (Y 0-1 से बाहर) जिससे back-out और anticipate जैसे 'ओवरशूट'/बाउंस प्रभाव बनते हैं। X 0-1 के भीतर रहता है (समय पीछे नहीं जा सकता)।

सामान्य उपयोग

कस्टम CSS ट्रांजिशन ईसिंगहोवर प्रभाव, मेनू और UI संक्रमण के लिए प्राकृतिक-अनुभूति वाली ईसिंग डिज़ाइन करें।
बाउंस और ओवरशूट एनिमेशनबॉक्स के पास नियंत्रण बिंदुओं को खींचकर व्यसनी वसंत/बाउंस गति बनाएं।
@keyframes एनिमेशन के लिए ईसिंगCSS कीफ्रेम एनिमेशन के लिए सही animation-timing-function चुनें।
JS एनिमेशन लाइब्रेरी के लिए ईसिंग मानGSAP, Framer Motion, anime.js और अन्य के लिए cubic-bezier मान प्राप्त करें।
समझें कि ईसिंग कैसे काम करती हैएक बेजियर वक्र और इसके द्वारा उत्पादित गति के बीच संबंध देखें।

यह कैसे काम करता है

एडिटर पूरी तरह ब्राउज़र में React स्टेट और SVG का उपयोग करके बनाया गया है — कोई लाइब्रेरी कर्व मैथ हैंडल नहीं करती। दो ड्रैग करने योग्य कंट्रोल पॉइंट एक SVG cubic Bezier पाथ परिभाषित करते हैं, और ब्राउज़र का अपना CSS एनिमेशन इंजन परिणामी cubic-bezier() वैल्यू को सीधे एक @keyframes नियम में इंजेक्ट करके मोशन प्रीव्यू चलाता है।

1
कंट्रोल पॉइंट खींचें या टाइप करें
दो हैंडल (P1 टील में, P2 गुलाबी में) एक SVG कैनवस पर बैठते हैं। खींचने में setPointerCapture के साथ Pointer Events API उपयोग होता है ताकि हैंडल SVG की सीमा के बाहर भी आपकी उंगली या कर्सर को फ़ॉलो करे। आप x1/y1/x2/y2 नंबर इनपुट में सटीक वैल्यू टाइप करके या ऐरो कीज़ से भी हैंडल हिला सकते हैं।
2
SVG रीयल टाइम में कर्व खींचता है
कर्व एक सिंगल SVG <path> एलिमेंट है जिसका C (cubic Bezier) कमांड हर स्टेट अपडेट पर चार कंट्रोल-पॉइंट कोऑर्डिनेट से फिर से गणना किया जाता है। कोई कैनवस नहीं, कोई बाहरी लाइब्रेरी नहीं — ब्राउज़र का SVG रेंडरर सीधे पाथ खींचता है।
3
ब्राउज़र CSS इंजन ईज़िंग का प्रीव्यू करता है
तीन लाइव एनिमेशन (एक स्लाइडिंग डॉट, एक चौड़ाई ट्रांज़िशन, और एक स्केल) इनलाइन इंजेक्ट किए cubic-bezier() वैल्यू के साथ CSS @keyframes चलाते हैं। ब्राउज़र का अपना एनिमेशन इंजन कर्व की व्याख्या करता है, इसलिए आप जो देखते हैं वह बिल्कुल वही है जो आपका प्रोडक्शन CSS बनाएगा।
4
अपने फ़्रेमवर्क के सिंटैक्स में स्निपेट कॉपी करें
टैब उन्हीं चार नंबरों को CSS transition-timing-function, एक Tailwind arbitrary-value क्लास, एक Framer Motion ease array, या एक anime.js ईज़िंग स्ट्रिंग के रूप में फ़ॉर्मेट करते हैं। स्निपेट navigator.clipboard के साथ क्लिपबोर्ड में लिखा जाता है। कर्व URL hash (#b=x1,y1,x2,y2) में भी एनकोड किया जाता है ताकि आप इसे शेयर या बुकमार्क कर सकें।

मुफ़्त CSS क्यूबिक-बेज़ियर इज़िंग जेनरेटर

सामान्य उपयोग

यह कैसे काम करता है

संबंधित टूल

ऑडियो फ़ेड इन/आउट

सबटाइटल संपादक

CSS ग्रिड जनरेटर

अक्सर पूछे जाने वाले प्रश्न