क्यूबिक बेज़ियर जनरेटर: लाइव एनिमेशन के साथ ईज़िंग कर्व

इसका इस्तेमाल कैसे करें

ग्राफ़ पर नियंत्रण बिंदु 1 या नियंत्रण बिंदु 2 खींचें। किसी बिंदु पर क्लिक करके छोटे कदमों के लिए तीर कुंजियाँ इस्तेमाल करें; बड़े कदमों के लिए Shift दबाए रखें।
सटीक कर्व चाहिए तो x1 (0 से 1), y1, x2 (0 से 1) और y2 में ठीक मान लिखें। x मान 0 और 1 के बीच रहने चाहिए।
ease-in-out जैसा प्रीसेट दबाएँ, या एनिमेशन पूर्वावलोकन के नीचे चलाएँ दबाएँ और गेंद को कर्व पर चलते देखें।
CSS घोषणा कॉपी करें और उसे ट्रांज़िशन या एनिमेशन में इस्तेमाल करें।

चारों संख्याओं का मतलब

cubic Bézier ईज़िंग कर्व (0, 0) से शुरू होता है और (1, 1) पर खत्म होता है। उसके दो नियंत्रण बिंदु, (x1, y1) और (x2, y2), उसका आकार तय करते हैं। क्षैतिज अक्ष पर बीते समय का हिस्सा है, और ऊर्ध्वाधर अक्ष पर हुए बदलाव का हिस्सा। CSS Easing Functions specification नियंत्रण बिंदुओं के x मान को 0 से 1 की सीमा में रखता है, क्योंकि समय उल्टा नहीं चल सकता और अंत से आगे नहीं जा सकता।

y मानों पर ऐसी कोई सीमा नहीं है। 1 से ऊपर या 0 से नीचे का y मान कर्व को ओवरशूट कराता है, यानी बदलाव अपने अंत से आगे जाकर लौटता है, या दूसरी दिशा में चलकर शुरू होता है।

cubic-bezier(x1, y1, x2, y2), जहाँ x1 और x2 0 और 1 के बीच हैं

प्रीसेट और एनिमेशन

कीवर्ड ease है cubic-bezier(0.25, 0.1, 0.25, 1), ease-in है cubic-bezier(0.42, 0, 1, 1), ease-out है cubic-bezier(0, 0, 0.58, 1) और ease-in-out है cubic-bezier(0.42, 0, 0.58, 1), जैसा specification उन्हें देता है। linear ईज़िंग एक सीधी रेखा है, जिसे cubic-bezier(0, 0, 1, 1) कर्व भी खींचता है।

गेंद एनिमेशन के टाइमिंग की तरह कर्व चलाती है, इसलिए ईज़िंग गति के रूप में दिखती है। अगर आपका डिवाइस कम गति माँगता है, तो एनिमेशन रुका हुआ शुरू होता है, और चलाएँ उसे शुरू करता है।

किसी ऐसे तत्व के लिए जो पेज पर आता है, ease-out जैसा नरम कर्व इस्तेमाल करें, और जो पेज से जाता है उसके लिए ease-in।
ट्रांज़िशन छोटा रखें, ताकि ईज़िंग महसूस हो, इंतजार न करना पड़े।

हल किया हुआ उदाहरण: आधे समय पर प्रगति

ease-in-out कर्व, cubic-bezier(0.42, 0, 0.58, 1), अपने केंद्र के आर-पार सममित है, इसलिए आधे समय पर वह ठीक आधा बदलाव कर चुका होता है: रीडआउट 0.5000 दिखाता है।

ease कर्व, cubic-bezier(0.25, 0.1, 0.25, 1), उसी बिंदु पर आगे है। आधे समय पर उसने बदलाव का 0.8024 किया है, इसलिए वह शुरू में तेज चलता है और अंत में धीमा होता है।

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

गेंद क्या दिखाती है?

गेंद ट्रैक के बाएँ सिरे से दाएँ तक चलती है, और उसकी स्थिति कर्व का पालन करती है: क्षैतिज स्थिति अब तक हुए बदलाव का हिस्सा है। जब कर्व 1 से ऊपर जाता है, तो गेंद ट्रैक के अंत से आगे निकलती है और वहीं काट दी जाती है।

x मान 0 और 1 से आगे क्यों नहीं जा सकते?

क्षैतिज अक्ष समय है, और कर्व शुरू से अंत तक का समय ढकता है। शुरुआत से पहले या अंत के बाद का समय कर्व पर जगह नहीं पाता, इसलिए specification नियंत्रण बिंदुओं के x मान 0 और 1 के बीच रखता है। y मानों पर ऐसी सीमा नहीं है।

ease-in और ease-out में क्या अंतर है?

ease-in धीरे शुरू होकर अंत की ओर तेज होता है, जबकि ease-out तेज शुरू होकर अंत में धीमा होता है। दोनों कर्व एक-दूसरे के दर्पण-प्रतिबिंब हैं, इसलिए वही बदलाव उल्टे क्रम में पढ़ा जाता है।

क्या यह मान एनिमेशन और ट्रांज़िशन दोनों में इस्तेमाल हो सकता है?

हाँ। वही cubic-bezier() मान animation-timing-function और transition-timing-function दोनों के लिए काम करता है, इसलिए घोषणा दोनों जगह इस्तेमाल हो सकती है।

क्या जो मैं खींचता या लिखता हूँ वह कहीं सहेजा या भेजा जाता है?

नहीं। कर्व और एनिमेशन आपके ब्राउज़र में बनते हैं। कुछ भी हमारे सर्वर पर सहेजा या भेजा नहीं जाता, इसलिए पेज छोड़ने से पहले घोषणा कॉपी कर लें।

स्रोत

आँकड़े और टेक्स्ट आखिरी बार मंगलवार, 10 नवंबर 2026 को जाँचे गए।