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

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

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

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

सीएसएस ब्यूटीफायर

पेशेवर सटीकता के साथ अपने सीएसएस कोड को प्रारूपित और सुशोभित करें

स्टाइलस टू सीएसएस कन्वर्टर

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

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

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

बेस 64 से JSON डिकोडर

बेस 64 एन्कोडेड स्ट्रिंग्स को तुरंत स्वरूपित JSON में कनवर्ट करें। बिना किसी डेटा अपलोड के आपके ब्राउज़र में स्थानीय रूप से काम करता है।

रोमन अंकों से संख्या परिवर्तक

चरण-दर-चरण स्पष्टीकरण के साथ रोमन अंकों को उनके संख्यात्मक समकक्षों में कनवर्ट करें

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

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