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

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

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

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

Sass से CSS कन्वर्टर

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

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

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

Less to CSS Converter

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

HTML Minifier

पेशेवर सटीकता के साथ अपने HTML कोड को संपीड़ित और अनुकूलित करें

Convert JSON to SQL Effortlessly

एक क्लिक के साथ अपने JSON डेटा को SQL INSERT स्टेटमेंट में रूपांतरित करें। तेज़, सुरक्षित और पूरी तरह से ब्राउज़र-आधारित।

Mass Unit Converter

अपने वैज्ञानिक और रोजमर्रा की जरूरतों के लिए परिशुद्धता के साथ द्रव्यमान की विभिन्न इकाइयों के बीच कनवर्ट करें