सीएसएस घन बेज़ियर जेनरेटर

सीएसएस क्यूबिक बेज़ियर जेनरेटर आसान कार्य बनाएं

नियंत्रण बिंदु

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

लोकप्रिय सहजता प्रीसेट

सीएसएस आउटपुट

cubic-bezier(0.25, 0.1, 0.25, 1)

Preview

Duration: 500ms

Bezier Curve Visualization

time (1) easing (1) easing (0) P0 (0, 1) P1 (0.25, 0.1) P2 (0.25, 1) P3 (1, 1)

x1

0.25

y1

0.1

x2

0.25

y2

1

क्यूबिक बेज़ियर दस्तावेज़ीकरण

क्यूबिक बेज़ियर वक्र क्या है?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

CSS सिंटैक्स

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

सामान्य उपयोग के मामले

  • एनिमेटेड संक्रमण:गुणों को बदलने वाले तत्वों के लिए चिकनी एनिमेशन बनाएं।
  • स्क्रॉल प्रभाव:स्क्रॉल एनिमेशन की गति को नियंत्रित करें।
  • इंटरएक्टिव तत्व:निर्धारित करें कि तत्व होवर करने या क्लिक करने जैसे उपयोगकर्ता इंटरैक्शन पर कैसे प्रतिक्रिया देते हैं.
  • मोशन डिजाइन:UI तत्वों के लिए जटिल गति अनुक्रम तैयार करें।

लोकप्रिय सहजता कार्य

Ease (default)

धीमी गति से शुरू होता है, जल्दी से तेज होता है, और फिर धीमा हो जाता है।

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

शुरू से अंत तक लगातार गति।

cubic-bezier(0, 0, 1, 1)

Ease-in

धीमी गति से शुरू होता है, फिर तेज होता है।

cubic-bezier(0.42, 0, 1, 1)

Ease-out

तेजी से शुरू होता है, फिर धीमा हो जाता है।

cubic-bezier(0, 0, 0.58, 1)

कस्टम कर्व्स बनाने के लिए टिप्स

  1. x मान 0 और 1 के बीच रखें:इस श्रेणी के बाहर के मान अनपेक्षित व्यवहार का कारण बन सकते हैं।
  2. वक्र की कल्पना करें:यह समझने के लिए इंटरैक्टिव ग्राफ़ का उपयोग करें कि परिवर्तन एनीमेशन को कैसे प्रभावित करते हैं।
  3. वास्तविक तत्वों के साथ परीक्षण करें:यह सुनिश्चित करने के लिए कि यह सही लगता है, हमेशा वास्तविक UI घटकों के साथ अपने वक्र का पूर्वावलोकन करें।
  4. प्रीसेट सहेजें:भविष्य की परियोजनाओं के लिए उपयोगी घटता बुकमार्क करें।

Related Tools

Less to CSS Converter

अपने कम कोड को CSS में बदलें। तेज़, आसान और सुरक्षित।

CSS3 संक्रमण जेनरेटर

चिकनी अस्पष्टता संक्रमण

उत्पन्न CSS3 आसानी से बदलता है

जटिल CSS3 बनाने के लिए एक शक्तिशाली, सहज ज्ञान युक्त उपकरण कोड लिखे बिना बदल जाता है। वास्तविक समय में परिवर्तनों की कल्पना करें और अपनी परियोजनाओं में उपयोग करने के लिए उत्पन्न सीएसएस की प्रतिलिपि बनाएं।

वॉल्यूमेट्रिक फ्लो रेट कन्वर्टर

सटीकता और आसानी के साथ विभिन्न इकाइयों के बीच वॉल्यूमेट्रिक प्रवाह दर कन्वर्ट

औसत कैलकुलेटर

हमारे उपयोग में आसान टूल के साथ संख्याओं के एक सेट के औसत (अंकगणितीय माध्य) की त्वरित गणना करें।

HSV to Pantone

प्रिंट डिजाइन के लिए एचएसवी रंग कोड को पैनटोन® संदर्भों में कनवर्ट करें