cubic-bezier() में चार संख्याओं का क्या मतलब है?

वे दो कंट्रोल बिंदुओं के x और y निर्देशांक हैं: cubic-bezier(x1, y1, x2, y2)। वक्र का आरंभ और अंत (0,0) और (1,1) पर स्थिर होते हैं, और ये दो हैंडल उनके बीच के पथ को मोड़ते हैं ताकि सेट किया जा सके कि एनिमेशन कैसे त्वरित होता है।

x मान 0 और 1 के बीच क्यों रहने चाहिए?

CSS में x अक्ष समय के साथ एनिमेशन की प्रगति है, जो केवल आगे बढ़ती है। x1 और x2 को 0 से 1 में रखने से गारंटी मिलती है कि वक्र हर क्षण पर एक एकल मान का प्रतिनिधित्व करता है। ओवरशूट या प्रत्याशा बनाने के लिए y उस रेंज से बाहर जा सकता है।

मैं एक उछाल भरी या ओवरशूट ईज़िंग कैसे बनाऊँ?

एक कंट्रोल बिंदु को 1 से अधिक या 0 से कम y दें। उदाहरण के लिए cubic-bezier(0.34, 1.56, 0.64, 1) स्थिर होने से पहले अंत से आगे ओवरशूट करता है, जो एक कोमल उछाल के रूप में पढ़ा जाता है। ऐसा करने के लिए एक हैंडल को प्लॉट के ऊपर या नीचे खींचें।

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

ease cubic-bezier(0.25, 0.1, 0.25, 1) है और ease-in-out से थोड़ा तेज़ शुरू होता है, जो cubic-bezier(0.42, 0, 0.58, 1) है और सममित है। ease-in-out समान रूप से ऊपर उठता और धीमा होता है, जबकि ease गति को थोड़ा आगे-लोड करता है।

क्या मैं इस मान को animation-timing-function के लिए भी उपयोग कर सकता हूँ?

हाँ। एक cubic-bezier() कहीं भी काम करता है जहाँ CSS एक ईज़िंग फ़ंक्शन स्वीकार करता है, जिसमें transition-timing-function, animation-timing-function, और transition तथा animation शॉर्टहैंड का टाइमिंग स्लॉट शामिल है।

क्या वक्र खींचने से कुछ भी किसी सर्वर पर भेजा जाता है?

नहीं। एडिटर, एनिमेटेड प्रीव्यू, और जेनरेट किया गया CSS सभी सादे JavaScript के साथ आपके ब्राउज़र में गणना होते हैं। आपके वक्र के बारे में कुछ भी ArrayKit पर अपलोड नहीं होता।

cubic-bezier() जेनरेटर

एक CSS cubic-bezier() ईज़िंग वक्र को आकार देने के लिए दो कंट्रोल बिंदु खींचें, गति का प्रीव्यू देखें, और टाइमिंग फ़ंक्शन कॉपी करें — सब आपके ब्राउज़र में।

cubic-bezier() जेनरेटर पूरी तरह आपके ब्राउज़र में चलता है। आपके द्वारा खींचा गया वक्र, एनिमेशन प्रीव्यू, और जेनरेट किया गया cubic-bezier() CSS कभी आपके डिवाइस से बाहर नहीं जाते और कुछ भी ArrayKit पर अपलोड नहीं होता।

CSS Formatter खोलें

cubic-bezier() जेनरेटर के बारे में

cubic-bezier() जेनरेटर आपको एक लाइव प्लॉट पर इसके दो कंट्रोल बिंदुओं को खींचकर एक CSS ईज़िंग वक्र को आकार देने देता है, फिर आपके ट्रांज़िशन या एनिमेशन के लिए सटीक cubic-bezier(x1, y1, x2, y2) टाइमिंग फ़ंक्शन कॉपी करता है। ease, ease-in-out, या एक उछाल भरे ease-out-back जैसे नामित प्रीसेट से शुरू करें, फिर माउस या तीर कुंजियों से हैंडल को बारीकी से ट्यून करें। एक एनिमेटेड बिंदु आपके वक्र को वास्तविक समय में चलाता है ताकि आप इसे पेस्ट करने से पहले त्वरण को महसूस कर सकें। यह उन फ्रंट-एंड डेवलपर्स और डिज़ाइनरों के लिए बनाया गया है जो संख्याओं का अनुमान लगाए बिना एक transition-timing-function या animation-timing-function के लिए गति ट्यून कर रहे हैं। सब कुछ आपके डिवाइस पर रेंडर होता है — वक्र, प्रीव्यू, और जेनरेट किया गया CSS कभी आपके ब्राउज़र से बाहर नहीं जाते।

विशेषताएँ

ईज़िंग को आकार देने के लिए एक लाइव वक्र पर दो कंट्रोल बिंदु खींचें
नामित प्रीसेट: linear, ease, ease-in, ease-out, ease-in-out, और back वक्र
एनिमेटेड बिंदु और scale/opacity डेमो वक्र को वास्तविक समय में चलाते हैं
सटीक cubic-bezier() मान और एक तैयार transition-timing-function नियम कॉपी करता है
पिक्सेल-सटीक ट्यूनिंग के लिए तीर कुंजियों से हर हैंडल को हिलाएँ
ओवरशूट हैंडल आपको y के 1 से आगे जाने के साथ उछाल भरे ease-back वक्र बनाने देते हैं
X मान स्वतः CSS-आवश्यक 0 से 1 रेंज में क्लैंप हो जाते हैं
जब वर्तमान वक्र एक मानक प्रीसेट से मेल खाता है तो उसे पहचानता और लेबल करता है

cubic-bezier() जेनरेटर का उपयोग कैसे करें

एक शुरुआती बिंदु के रूप में ease-in-out जैसा एक प्रीसेट चुनें
वक्र को फिर से आकार देने के लिए किसी भी कंट्रोल बिंदु को खींचें, या तीर कुंजियों से हिलाएँ
आपके द्वारा बनाए त्वरण को महसूस करने के लिए एनिमेटेड प्रीव्यू देखें
cubic-bezier() मान या पूरा transition-timing-function नियम कॉपी करें
इसे अपने CSS transition या animation शॉर्टहैंड में पेस्ट करें

उदाहरण

इनपुट

control point 1: 0.34, 1.56
control point 2: 0.64, 1

आउटपुट

.card {
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

एक ease-out-back वक्र एक सूक्ष्म उछाल के लिए 1 से आगे ओवरशूट करता है।

सामान्य त्रुटियाँ और समस्या निवारण

ब्राउज़र मेरे cubic-bezier() को नज़रअंदाज़ करता है और linear पर वापस चला जाता है। — दोनों x मान 0 से 1 के भीतर होने चाहिए। यह टूल उन्हें आपके लिए क्लैंप करता है, लेकिन उस रेंज के बाहर एक हाथ से टाइप किया गया x1 या x2 पूरे मान को अमान्य बना देता है।
एनिमेशन शुरू और अंत में कठोर दिखता है। — हर हैंडल को उसके अंत बिंदु से और दूर खींचें। (0,0) और (1,1) के करीब हैंडल वक्र को मुश्किल से मोड़ते हैं, इसलिए गति निकट-रैखिक रहती है।
मैं एक उछाल चाहता हूँ लेकिन y मान वापस स्नैप हो जाता है। — एक कंट्रोल बिंदु को प्लॉट के शीर्ष से ऊपर खींचें ताकि उसका y 1 से आगे जाए (या 0 से नीचे)। केवल x बाधित है; y ओवरशूट ही वह है जो प्रत्याशा और उछाल बनाता है।
एक हैंडल खींचने के बाद मेरा प्रीसेट पहचाना जाना बंद हो गया। — कोई भी बदलाव वक्र को कस्टम बना देता है, इसलिए प्रीसेट लेबल गायब हो जाता है। उसके सटीक मानों पर वापस स्नैप करने के लिए प्रीसेट चिप पर फिर से क्लिक करें।

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

cubic-bezier() में चार संख्याओं का क्या मतलब है?: वे दो कंट्रोल बिंदुओं के x और y निर्देशांक हैं: cubic-bezier(x1, y1, x2, y2)। वक्र का आरंभ और अंत (0,0) और (1,1) पर स्थिर होते हैं, और ये दो हैंडल उनके बीच के पथ को मोड़ते हैं ताकि सेट किया जा सके कि एनिमेशन कैसे त्वरित होता है।
x मान 0 और 1 के बीच क्यों रहने चाहिए?: CSS में x अक्ष समय के साथ एनिमेशन की प्रगति है, जो केवल आगे बढ़ती है। x1 और x2 को 0 से 1 में रखने से गारंटी मिलती है कि वक्र हर क्षण पर एक एकल मान का प्रतिनिधित्व करता है। ओवरशूट या प्रत्याशा बनाने के लिए y उस रेंज से बाहर जा सकता है।
मैं एक उछाल भरी या ओवरशूट ईज़िंग कैसे बनाऊँ?: एक कंट्रोल बिंदु को 1 से अधिक या 0 से कम y दें। उदाहरण के लिए cubic-bezier(0.34, 1.56, 0.64, 1) स्थिर होने से पहले अंत से आगे ओवरशूट करता है, जो एक कोमल उछाल के रूप में पढ़ा जाता है। ऐसा करने के लिए एक हैंडल को प्लॉट के ऊपर या नीचे खींचें।
ease और ease-in-out में क्या अंतर है?: ease cubic-bezier(0.25, 0.1, 0.25, 1) है और ease-in-out से थोड़ा तेज़ शुरू होता है, जो cubic-bezier(0.42, 0, 0.58, 1) है और सममित है। ease-in-out समान रूप से ऊपर उठता और धीमा होता है, जबकि ease गति को थोड़ा आगे-लोड करता है।
क्या मैं इस मान को animation-timing-function के लिए भी उपयोग कर सकता हूँ?: हाँ। एक cubic-bezier() कहीं भी काम करता है जहाँ CSS एक ईज़िंग फ़ंक्शन स्वीकार करता है, जिसमें transition-timing-function, animation-timing-function, और transition तथा animation शॉर्टहैंड का टाइमिंग स्लॉट शामिल है।
क्या वक्र खींचने से कुछ भी किसी सर्वर पर भेजा जाता है?: नहीं। एडिटर, एनिमेटेड प्रीव्यू, और जेनरेट किया गया CSS सभी सादे JavaScript के साथ आपके ब्राउज़र में गणना होते हैं। आपके वक्र के बारे में कुछ भी ArrayKit पर अपलोड नहीं होता।