सीएसएस के पीछे की वास्तविक संख्याएँ आसानी से अंदर-बाहर होती हैं
दो नियंत्रण बिंदुओं को खींचकर एक कस्टम सीएसएस क्यूबिक-बेज़ियर () टाइमिंग फ़ंक्शन डिज़ाइन करें, इसे एक रैखिक संदर्भ के विरुद्ध लाइव पूर्वावलोकन करें, फिर तैयार मान की प्रतिलिपि बनाएँ।
नतीजा
यह पृष्ठ क्यूबिक-बेज़ियर जनरेटर को x1=0.42, y1=0, x2=0.58, y2=1 के साथ खोलता है जो पहले ही लोड हो चुका है - सटीक नियंत्रण बिंदु CSS ईज-इन-आउट कीवर्ड का विस्तार करता है। या तो हैंडल को खींचें, या संख्याओं को सीधे संपादित करें, और वक्र, एनीमेशन पूर्वावलोकन और कॉपी करने योग्य स्ट्रिंग सभी तुरंत अपडेट हो जाएं।
ईज़-इन-आउट पांच अंतर्निहित सीएसएस टाइमिंग कीवर्ड में से एक है, और यह विशेष रूप से लोकप्रिय है क्योंकि यह वक्र शुरुआत से धीरे-धीरे तेज होता है, मध्य के माध्यम से काफी समान गति रखता है, और अंत से पहले वापस आसान हो जाता है - एक आकार जो अधिकांश यूआई गति के लिए प्राकृतिक के रूप में पढ़ता है। इसे कीवर्ड नाम के बजाय स्पष्ट नियंत्रण बिंदु के रूप में देखने से यह स्पष्ट हो जाता है कि क्यों: y1 0 के पास बैठता है और y2 1 के पास बैठता है, दोनों अपने मिलान x के करीब हैं, इसलिए किसी भी दिशा में कोई ओवरशूट नहीं है।
जब भी आपको भावना को थोड़ा कम करने की आवश्यकता हो तो कीवर्ड के बजाय शुरुआती बिंदु के रूप में इन चार संख्याओं का उपयोग करें - तेज शुरुआत के लिए X1 को नीचे खींचें, या इसी आकार को हल्के ओवरशूट में बदलने के लिए y2 को 1 से ऊपर दबाएं। प्रत्येक परिवर्तन पूर्वावलोकन और कॉपी करने योग्य क्यूबिक-बेज़ियर() लाइन को तुरंत अपडेट करता है।