CSS टूल्स/ईज़िंग फ़ंक्शन एडिटर
ईज़िंग फ़ंक्शन एडिटर
स्मूथ एनिमेशन के लिए कस्टम क्यूबिक-बेज़ियर ईज़िंग फ़ंक्शन डिज़ाइन करें
कर्व एडिटर
कर्व समायोजित करने के लिए कंट्रोल पॉइंट्स खींचें
नियंत्रण
1s
एनिमेशन पूर्वावलोकन
प्रीसेट
CSS कोड
Loading...CSS Easing Function Guide
Learn how to create smooth and natural animations
What is Easing?
Easing functions specify the rate of change of an animation over time. The cubic-bezier function defines a curve with four control points, allowing you to create custom acceleration and deceleration patterns. This makes animations feel more natural and engaging than linear motion.
How to Use This Tool
- Drag the control points on the curve to adjust the easing
- Use preset buttons for common easing functions
- Preview the animation to see the effect in action
- Copy the cubic-bezier value to use in your CSS
Pro Tips
- Use ease-out for entering animations and ease-in for exiting
- Values outside 0-1 on the Y axis create overshoot effects
- Linear easing works best for opacity and color transitions
Browser Support
The cubic-bezier() function is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It's part of the CSS transitions and animations specifications with excellent compatibility.
अक्सर पूछे जाने वाले प्रश्न
cubic-bezier के 4 मान क्या दर्शाते हैं?
cubic-bezier(x1, y1, x2, y2) में x1, y1 पहला कंट्रोल पॉइंट है, x2, y2 दूसरा कंट्रोल पॉइंट है। x मान 0~1 के बीच होना चाहिए (समय दर्शाता है), y मान रेंज से बाहर हो सकते हैं (ओवरशूट इफ़ेक्ट)। स्टार्ट पॉइंट (0,0) और एंड पॉइंट (1,1) फिक्स्ड हैं।
ease, ease-in, ease-out में क्या अंतर है?
ease शुरू और अंत में स्मूथ है और बीच में तेज़। ease-in धीरे शुरू होकर तेज़ होता है (एक्सेलेरेशन)। ease-out तेज़ शुरू होकर धीमा होता है (डिसेलेरेशन)। ease-in-out शुरू और अंत दोनों में धीमा है। UI एनिमेशन में मुख्यतः ease-out का उपयोग होता है।
ओवरशूट (इलास्टिक) इफ़ेक्ट कैसे बनाएं?
y मान 0 से कम या 1 से अधिक वाले cubic-bezier का उपयोग करें। उदाहरण: cubic-bezier(0.68, -0.55, 0.27, 1.55) शुरू और अंत में लक्ष्य को थोड़ा पार करके वापस आने वाला इलास्टिक इफ़ेक्ट बनाता है। ऐसे इफ़ेक्ट बटन क्लिक या मोडल अपीयरेंस में जीवंतता जोड़ते हैं।
steps() फ़ंक्शन का उपयोग कब करें?
steps() फ़ंक्शन निरंतर नहीं बल्कि चरणबद्ध एनिमेशन बनाता है। स्प्राइट एनिमेशन, टाइपराइटर इफ़ेक्ट, घड़ी सेकंड हैंड जैसी असंतत गति के लिए उपयुक्त। steps(5) एनिमेशन को 5 चरणों में विभाजित करके चलाता है।
कौन सा ईज़िंग फ़ंक्शन चुनना चाहिए?
एलिमेंट दिखाई देते समय ease-out (तेज़ी से दिखाई देता है और धीरे से सेटल होता है), गायब होते समय ease-in (धीरे शुरू होकर तेज़ी से गायब) का उपयोग करें। मूवमेंट एनिमेशन के लिए ease-in-out प्राकृतिक है। बैकग्राउंड कलर या ओपेसिटी चेंज के लिए linear उपयुक्त है।