सीधे कंटेंट पर जाएँ
Toolars
एक्सप्लोर करें

CSS cubic-bezier जनरेटर

CSS Cubic Bezier Generator

आठ गति वक्र, चार Bézier निर्देशांक और समय का चलता पूर्वावलोकन।

लोकल प्रोसेसिंग

प्रोसेसिंग का विवरण

टूल का इनपुट आपके डिवाइस पर प्रोसेस होता है।

टूल चलाने के लिए संसाधन डाउनलोड हो सकते हैं। खाता सेवाएँ अलग हैं।

गोपनीयता की जानकारी
बग रिपोर्ट करें

टास्क पथ / इनपुट से परिणाम तक

cubic-bezier ईज़िंग कर्व कैसे डिज़ाइन करें

  1. 01

    पहला कंट्रोल पॉइंट रखें

    कंट्रोल X1 को 0 और 1 के बीच तथा कंट्रोल Y1 को −1 और 2 के बीच सेट करें। कर्व चार्ट लाइव दोबारा बनता है, शुरुआती बिंदु से आपके हैंडल तक गाइड लाइन के साथ। 8 गति प्रीसेट · [x1, y1, x2, y2] · cubic-bezier()

  2. 02

    दूसरा कंट्रोल पॉइंट रखें

    कंट्रोल X2 (0–1) और कंट्रोल Y2 (−1 से 2) सेट करें। Y मान को 1 से आगे खींचना ही वह ओवरशूट बनाता है जो ईज़ को स्प्रिंगी महसूस कराता है; Y1 को 0 से नीचे खींचना मोशन शुरू होने से पहले एक क्षण की प्रत्याशा जोड़ता है।

  3. 03

    अवधि सेट करें

    अवधि 0.1 से 4 सेकंड के बीच चुनें। मोशन ट्रैक का मार्कर आपके सटीक कर्व का इस्तेमाल करते हुए उस पर लूप में चलता है, इसलिए जो ताल आप देखते हैं वही ताल आप शिप करते हैं।

  4. 04

    या किसी ज्ञात कर्व से शुरू करें

    डिफ़ॉल्ट कर्व — 0.25, 0.1, 0.25, 1 — ठीक-ठीक मानक ease कीवर्ड है और तटस्थ शुरुआती बिंदु। स्प्रिंगी ओवरशूट कर्व (0.34, 1.56, 0.64, 1) के लिए नमूना लोड करें दबाएं, जो दिखाता है कि 1 से आगे का Y मान क्या करता है।

  5. 05

    टाइमिंग CSS कॉपी करें

    CSS कॉपी करें या .css डाउनलोड करें से toolars-cubic-bezier.css मिलता है। .motion नियम transition-duration और दोनों timing-function गुण सेट करता है। यह animation-duration सेट नहीं करता; कीफ़्रेम एनीमेशन के लिए अवधि अलग से जोड़ें।

  6. 06

    शिप करने से पहले चार्ट पढ़ें

    चार्ट तय शुरुआती और अंतिम बिंदुओं के बीच समय के साथ प्रगति प्लॉट करता है: सपाट हिस्से धीमे, खड़े हिस्से तेज़। शुरुआत से नीचे उतरने या अंत से ऊपर उठने वाला कर्व गलती नहीं है — वह प्रत्याशा और ओवरशूट है, ईमानदारी से खींचा हुआ। HTML में वर्तमान CSS और कार्यशील उदाहरण है। मूल नियंत्रण कीबोर्ड इनपुट का समर्थन करते हैं।

टूल के तथ्य

प्रोसेसिंग
आपके ब्राउज़र में
इनपुट इस डिवाइस से बाहर जाता है
कभी नहीं
रिटेंशन
कुछ भी स्टोर नहीं होता
कीमत
मुफ़्त

आपका इनपुट ब्राउज़र में ही रहता है।

CSS cubic-bezier जनरेटर अपना सत्यापित लोकल एक्ज़ीक्यूशन पथ इस्तेमाल करता है और कोई छिपा इनपुट या आउटपुट इतिहास नहीं बनाता।

लोकल एक्ज़ीक्यूशन

मौजूदा ब्राउज़र टैब के अंदर चलता है।

कोई छिपी प्रोसेसिंग नहीं

सक्रिय टूल डेटा कभी Toolars दस्तावेज़ रिकॉर्ड नहीं बनता।

खाते की ज़रूरत नहीं

बिना प्रोफ़ाइल बनाए मुख्य वर्कफ़्लो इस्तेमाल करें। साइन इन करने के बाद फ़ेवरिट आपके खाते से सिंक होते हैं।

तुरंत रीसेट

टैब साफ़ करें और सक्रिय कार्य डेटा गायब।

CSS cubic-bezier जनरेटर असल में क्या करता है

झटके से खुलने लेकिन धीरे बैठने वाला मोडल, हल्के ओवरशूट वाला कार्ड होवर, बिना जल्दबाज़ी महसूस होने वाला ऑनबोर्डिंग टूलटिप — ईज़िंग ही तैयार इंटरफ़ेस और डिफ़ॉल्ट जैसे महसूस होने वाले इंटरफ़ेस में फ़र्क़ डालती है। असली एनिमेटेड पूर्वावलोकन के सामने यहां कर्व प्लॉट करना, स्टाइलशीट में चार नंबरों का अंदाज़ा लगाने से बेहतर है, और प्रयोग टैब में ही रहता है। जब लूप सही महसूस हो, तो चारों मान प्रोडक्शन के लिए पहले से सही होते हैं।

आम सवाल

X सिर्फ़ 0 से 1 तक क्यों जा सकता है जबकि Y −1 से 2 तक?
CSS मानक दोनों X मानों को [0, 1] के अंदर रखता है ताकि समय कर्व के साथ हमेशा आगे बढ़े। Y पर ऐसी सीमा नहीं है — 0 से नीचे या 1 से ऊपर के मान प्रत्याशा और ओवरशूट बनाते हैं — और यह टूल Y को −1 से 2 तक सीमित करता है, जो हर व्यावहारिक ईज़ को कवर करता है। आठ गति वक्र, चार Bézier निर्देशांक और समय का चलता पूर्वावलोकन। HTML में वर्तमान CSS और कार्यशील उदाहरण है। मूल नियंत्रण कीबोर्ड इनपुट का समर्थन करते हैं।
ठीक-ठीक क्या एक्सपोर्ट होता है?
तीन डिक्लेरेशन वाली एक .motion क्लास: आपके सेकंडों पर सेट transition-duration, और transition-timing-function तथा animation-timing-function दोनों को सौंपा गया वही cubic-bezier() मान।
पूर्वावलोकन कैसे पढ़ूं?
चार्ट कर्व को उसके तय शुरुआती और अंतिम बिंदुओं के बीच प्लॉट करता है, दोनों कंट्रोल हैंडल तक गाइड के साथ, और नीचे का ट्रैक चुनी गई अवधि पर असली टाइमिंग फ़ंक्शन का इस्तेमाल करते हुए मार्कर एनिमेट करता है — ईमानदार ताल, कोई अनुमान नहीं।
ease-in, ease-out या स्प्रिंग कैसे आकारूं?
धीमी शुरुआत वाले ease-in के लिए पहले हैंडल का X 1 की ओर और Y नीचे रखें; कोमल ease-out के लिए दूसरे हैंडल का X 0 की ओर और Y ऊपर लाएं। लक्ष्य से आगे निकलने वाले स्प्रिंग के लिए किसी भी Y को 1 से ऊपर, या प्रत्याशा के लिए 0 से नीचे ले जाएं।
क्या यह क्लास ट्रांज़िशन और कीफ़्रेम एनिमेशन दोनों पर काम करती है?
हां — वही cubic-bezier() मान दोनों timing-function प्रॉपर्टी को सौंपा जाता है, और अवधि transition-duration में रहती है। अगर आपको सिर्फ़ एक तंत्र चाहिए, तो पेस्ट करने के बाद दूसरी लाइन मिटा दें; कर्व खुद तंत्र-निरपेक्ष है। कीफ़्रेम के साथ याद रखें कि टाइमिंग फ़ंक्शन पूरे रन पर नहीं, हर फ़्रेम-जोड़ी के बीच लागू होता है।
क्या कुछ अपलोड या स्टोर होता है?
नहीं। कर्व इसी टैब में लोकल रूप से गिना और पूर्वावलोकित होता है, किसी खाते की ज़रूरत नहीं, और कुछ भी लॉग या भेजा नहीं जाता। डिफ़ॉल्ट ease वापस लाने के लिए रीसेट दबाएं।

संबंधित काम, कोई बंद गली नहीं।

पूरे इंडेक्स पर लौटे बिना किसी दूसरे केंद्रित वर्कस्पेस में जाएँ।

CSS चेकबॉक्स जनरेटर

CSS Checkbox Generator

24 चेकबॉक्स टेम्पलेट: आठ निशान × तीन बदलाव; मूल पूर्वावलोकन क्लिक या स्पेस से जाँचें।

बनाएँ

CSS टॉगल स्विच जनरेटर

CSS Switch Generator

18 स्विच टेम्पलेट: छह नॉब आकृतियाँ × तीन बदलाव; क्लिक या कीबोर्ड से जाँचें।

बनाएँ

CSS क्लिप पाथ जनरेटर

CSS Clip Path Generator

24 कट आकृतियाँ, आकृति विकल्प और संपादन योग्य बहुभुज बिंदु; CSS या घोषणा निर्यात करें।

बनाएँ