क्यूबिक बेज़ियर जनरेटर

cubic-bezier(x1, y1, x2, y2) को हाथ से टाइप करना और अनुभव की जाँच के लिए पेज को रीलोड करना एनिमेशन को ट्यून करने का धीमा तरीका है। यह जनरेटर उस चक्र को बंद करता है: कर्व पर किसी भी कंट्रोल-पॉइंट हैंडल को ड्रैग करें, या x1/y1/x2/y2 फ़ील्ड में सटीक संख्याएँ टाइप करें, और कर्व, कॉपी करने लायक CSS स्ट्रिंग और लाइव एनिमेशन प्रीव्यू हर बदलाव पर अपडेट हो जाते हैं — कोई बिल्ड स्टेप नहीं, कोई रीलोड नहीं।

दोनों अक्ष जानबूझकर अलग तरीके से काम करते हैं। x1 और x2, 0 और 1 के बीच सीमित रहते हैं, क्योंकि CSS विनिर्देश के अनुसार cubic-bezier() टाइमिंग फ़ंक्शन के लिए यही आवश्यक है — इस रेंज से बाहर की वैल्यू अमान्य होती है। y1 और y2 की ऐसी कोई सीमा नहीं है: किसी हैंडल को बॉक्स के ऊपर या नीचे ड्रैग करें, और कर्व अपनी शुरुआत या अपने अंत से आगे निकल जाता है, जो ठीक वही तरीका है जिससे एक अकेले ईज़िंग कर्व से स्प्रिंग और बाउंस-स्टाइल प्रभाव बनाए जाते हैं।

कोई संख्या देखना और गति देखना एक जैसी बात नहीं है, इसलिए प्रीव्यू दो समान गेंदों को एक लूप पर साथ-साथ चलाता है: एक आपके कस्टम कर्व का उपयोग करके चलती है, दूसरी एक सादी स्थिर लीनियर गति से चलती है। उन्हें दौड़ते देखना यह बताने का सबसे तेज़ तरीका है कि कोई ईज़िंग कर्व असल में वह अनुभव पैदा करता है या नहीं जो आप चाहते हैं, इससे पहले कि वह किसी स्टाइलशीट तक पहुँचे। प्रीसेट पेज — CSS के अपने ease-in-out कीवर्ड के पीछे की असली संख्याएँ, एक ईमानदार ओवरशूट सन्निकटन जिसे कुछ लोग बाउंस कहते हैं, और Google का प्रकाशित Material Design स्टैंडर्ड कर्व — तैयार शुरुआती बिंदु हैं जिनसे आप कोरे कंट्रोल पॉइंट के बजाय ड्रैग करना शुरू कर सकते हैं।

सब कुछ आपके ब्राउज़र में स्थानीय रूप से चलता है: कोई अपलोड नहीं, कोई खाता नहीं, कोई सर्वर राउंड-ट्रिप नहीं, और पेज लोड होने के बाद जनरेटर ऑफ़लाइन काम करता रहता है।