CSS क्यूबिक बेझियर जनरेटर

सीएसएस क्यूबिक बेझियर जनरेटर इझींग फंक्शन्स तयार करा

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

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

बेझियर कर्व्ह व्हिज्युअलायझेशन

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.

सीएसएस वाक्यरचना

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 ची मूल्ये ० आणि १ दरम्यान ठेवा:या श्रेणीबाहेरील मूल्यांमुळे अनपेक्षित वर्तन होऊ शकते.
  2. वक्र कल्पना करा:बदलांचा अ‍ॅनिमेशनवर कसा परिणाम होतो हे समजून घेण्यासाठी परस्परसंवादी आलेख वापरा.
  3. वास्तविक घटकांसह चाचणी करा:तुमचा वक्र योग्य वाटतो याची खात्री करण्यासाठी नेहमी प्रत्यक्ष UI घटकांसह त्याचे पूर्वावलोकन करा.
  4. प्रीसेट जतन करा:भविष्यातील प्रकल्पांसाठी उपयुक्त वक्र बुकमार्क करा.

Related Tools

स्टायलस ते सीएसएस कन्व्हर्टर

तुमचा SCSS कोड CSS मध्ये रूपांतरित करा. जलद, सोपे आणि सुरक्षित.

CSS3 ट्रान्झिशन जनरेटर

गुळगुळीत अपारदर्शकता संक्रमण

SCSS ते CSS कनवर्टर

तुमचा SCSS कोड CSS मध्ये रूपांतरित करा. जलद, सोपे आणि सुरक्षित.

बेस६४ ते इमेज कन्व्हर्टर

वेब डेव्हलपमेंट आणि डेटा व्हिज्युअलायझेशनसाठी बेस६४ स्ट्रिंग्सना इमेजेसमध्ये परत रूपांतरित करा.

कोणत्याही उद्देशासाठी यादृच्छिक शब्द तयार करा

सानुकूल लांबी, जटिलता आणि स्वरूपण पर्यायांसह यादृच्छिक शब्द तयार करा.

हेक्स ते ऑक्टल

हेक्साडेसिमल संख्यांना सहजतेने ऑक्टलमध्ये रूपांतरित करा