CSS Cubic Bezier जनरेटर

कर्व्ह खाली-डावीकडून (सुरुवात) वर-उजवीकडे (शेवट) धावतो, ज्यामध्ये वेळ डावीकडून उजवीकडे जातो आणि प्रगती वर जाते. दोन हँडल्स हे नियंत्रण बिंदू (control points) आहेत जे त्याला वाकवतात — प्रत्येकाकडे X आणि Y असतो, त्यामुळे ते एकत्र cubic-bezier(x1, y1, x2, y2) बनतात. X हा 0 आणि 1 च्या दरम्यान राहतो, तर Y हालचाल ओव्हरशूट करण्यासाठी किंवा स्थिर होण्यापूर्वी मागे खेचण्यासाठी वरच्या बाजूला किंवा खालच्या बाजूला जाऊ शकतो.

cubic-bezier() कॉपी करा आणि जिथे टाइमिंग फंक्शन वापरले जाते तिथे टाका — 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 कर्व्ह्स आहेत, त्यामुळे त्यापैकी एक प्रीसेट निवडल्यास तुम्हाला त्या कीवर्डमागील अचूक मूल्य दिसते.

स्वतःहून नाही. एकच cubic-bezier आधीच अंदाज लावू शकतो आणि ओव्हरशूट करू शकतो — "back" प्रीसेट्स अगदी हेच करण्यासाठी एक हँडल बॉक्सच्या पलीकडे खेचतात — परंतु ते फक्त एका बाजूला जाऊ शकते आणि नंतर स्थिर होऊ शकते. बाऊन्स (Bounce) आणि इलास्टिक (elastic) अनेक वेळा दिशा बदलतात, जे एकच cubic-bezier दर्शवू शकत नाही; त्यासाठी CSS कीफ्रेम्स (keyframes) किंवा अनेक स्टॉप्ससह linear() फंक्शनची आवश्यकता असते.