डिज़ाइन · लोकल उपयोगिता

CSS cubic-bezier जनरेटर

CSS Cubic Bezier Generator

दो कंट्रोल पॉइंट से ईज़िंग कर्व घड़ें या जाने-माने कर्व से शुरू करें; अवधि सेट करें, चार्ट देखें और cubic-bezier() मान कॉपी करें।

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

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

लोकल रूप से चलता है · कुछ भी अपलोड नहीं होता

टाइमिंग स्टूडियो

CSS cubic-bezier जनरेटर

स्टैंडर्ड-वैलिड टाइमिंग कर्व प्लॉट करें और उसका असली ट्रांज़िशन रिदम प्रीव्यू करें।

लाइव प्रीव्यू

CSS एक्सपोर्ट करने से पहले कंट्रोल एडजस्ट करके इफ़ेक्ट जाँचें।

मान्य CSS

03 / CSS.motion

167 B · लाइव

.motion {
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

CSS cubic-bezier जनरेटर कैसे काम करता है, निजता और संबंधित टूल

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

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

01
पहला कंट्रोल पॉइंट रखें
कंट्रोल X1 को 0 और 1 के बीच तथा कंट्रोल Y1 को −1 और 2 के बीच सेट करें। कर्व चार्ट लाइव दोबारा बनता है, शुरुआती बिंदु से आपके हैंडल तक गाइड लाइन के साथ।
02
दूसरा कंट्रोल पॉइंट रखें
कंट्रोल X2 (0–1) और कंट्रोल Y2 (−1 से 2) सेट करें। Y मान को 1 से आगे खींचना ही वह ओवरशूट बनाता है जो ईज़ को स्प्रिंगी महसूस कराता है; Y1 को 0 से नीचे खींचना मोशन शुरू होने से पहले एक क्षण की प्रत्याशा जोड़ता है।
03
अवधि सेट करें
अवधि 0.1 से 4 सेकंड के बीच चुनें। मोशन ट्रैक का मार्कर आपके सटीक कर्व का इस्तेमाल करते हुए उस पर लूप में चलता है, इसलिए जो ताल आप देखते हैं वही ताल आप शिप करते हैं।
04
या किसी ज्ञात कर्व से शुरू करें
डिफ़ॉल्ट कर्व — 0.25, 0.1, 0.25, 1 — ठीक-ठीक मानक ease कीवर्ड है और तटस्थ शुरुआती बिंदु। स्प्रिंगी ओवरशूट कर्व (0.34, 1.56, 0.64, 1) के लिए नमूना लोड करें दबाएं, जो दिखाता है कि 1 से आगे का Y मान क्या करता है।
05
टाइमिंग CSS कॉपी करें
CSS कॉपी करें या .css डाउनलोड करें से toolars-cubic-bezier.css मिलता है। .motion नियम transition-duration और दोनों timing-function गुण सेट करता है। यह animation-duration सेट नहीं करता; कीफ़्रेम एनीमेशन के लिए अवधि अलग से जोड़ें।
06
शिप करने से पहले चार्ट पढ़ें
चार्ट तय शुरुआती और अंतिम बिंदुओं के बीच समय के साथ प्रगति प्लॉट करता है: सपाट हिस्से धीमे, खड़े हिस्से तेज़। शुरुआत से नीचे उतरने या अंत से ऊपर उठने वाला कर्व गलती नहीं है — वह प्रत्याशा और ओवरशूट है, ईमानदारी से खींचा हुआ।

टूल के तथ्य

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

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

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

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

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

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

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

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

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

तुरंत रीसेट

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

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

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

आम सवाल

X सिर्फ़ 0 से 1 तक क्यों जा सकता है जबकि Y −1 से 2 तक?

CSS मानक दोनों X मानों को [0, 1] के अंदर रखता है ताकि समय कर्व के साथ हमेशा आगे बढ़े। Y पर ऐसी सीमा नहीं है — 0 से नीचे या 1 से ऊपर के मान प्रत्याशा और ओवरशूट बनाते हैं — और यह टूल Y को −1 से 2 तक सीमित करता है, जो हर व्यावहारिक ईज़ को कवर करता है।

ठीक-ठीक क्या एक्सपोर्ट होता है?

तीन डिक्लेरेशन वाली एक .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 cubic-bezier जनरेटर

CSS cubic-bezier जनरेटर

लाइव प्रीव्यू

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

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

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

अवधि सेट करें

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

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

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

टूल के तथ्य

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

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

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

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

तुरंत रीसेट

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

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

CSS लोडिंग एनिमेशन जनरेटर

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

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

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

CSS cubic-bezier जनरेटर

लाइव प्रीव्यू