CSS Cubic Bezier जेनरेटर
दो हैंडल खींचकर easing कर्व बनाएं, एक डॉट को उस पर और एक सीधी गति के मुक़ाबले दौड़ते देखें, और cubic-bezier() वैल्यू कॉपी करें।
cubic-bezier(0.25, 0.1, 0.25, 1)कर्व आपके ब्राउज़र में ही बनता है। यहाँ जो भी सेट करते हैं वह BroBroGo पर अपलोड नहीं होता।
अक्सर पूछे जाने वाले सवाल
दो हैंडल और चार नंबर का क्या मतलब है?
कर्व नीचे-बाएँ (शुरुआत) से ऊपर-दाएँ (अंत) तक जाता है: बाएँ से दाएँ समय, और नीचे से ऊपर प्रगति। दोनों हैंडल वही कंट्रोल पॉइंट हैं जो कर्व को मोड़ते हैं — हर एक का एक X और एक Y होता है, यानी मिलकर cubic-bezier(x1, y1, x2, y2)। X हमेशा 0 और 1 के बीच रहता है, जबकि Y ऊपरी किनारे से ऊपर या निचले किनारे से नीचे जा सकता है, ताकि गति रुकने से पहले आगे निकल जाए या थोड़ा पीछे खिंचे।
यह वैल्यू अपने CSS में कैसे इस्तेमाल करूँ?
cubic-bezier() कॉपी करें और जहाँ भी timing function चाहिए वहाँ लगाएं — transition-timing-function, animation-timing-function, या शॉर्टहैंड में, जैसे transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)। ease, ease-in, ease-out और ease-in-out कीवर्ड असल में तय cubic-bezier कर्व ही हैं, इसलिए उनका प्रीसेट चुनने पर आपको कीवर्ड के पीछे की सटीक वैल्यू दिख जाती है।
क्या इससे bounce या elastic इफ़ेक्ट बन सकता है?
अकेले नहीं। एक cubic-bezier आगे निकल सकता है और थोड़ा पीछे खिंच सकता है — “back” प्रीसेट एक हैंडल को बॉक्स के बाहर खींचकर यही करते हैं — पर वह सिर्फ़ एक दिशा में चलकर रुक सकता है। bounce और elastic कई बार दिशा बदलते हैं, जो किसी एक cubic-bezier से नहीं हो सकता; उनके लिए CSS keyframes या कई स्टॉप वाला linear() फ़ंक्शन चाहिए।