Question 1

CSS में ईज़िंग फंक्शन क्या है?

Accepted Answer

ईज़िंग फंक्शन यह नियंत्रित करता है कि एनिमेशन या ट्रांज़िशन समय के साथ किस रफ़्तार से आगे बढ़े। एलिमेंट को हमेशा एक जैसी रफ़्तार से नहीं चलना होता: वह धीरे शुरू होकर तेज़ हो सकता है, लक्ष्य पार कर सकता है और फिर सेटल हो सकता है। CSS में यह transition-timing-function या animation-timing-function प्रॉपर्टी से सेट होता है।

Question 2

cubic-bezier() के चार नंबरों का क्या मतलब है?

Accepted Answer

cubic-bezier(x1, y1, x2, y2) दो कंट्रोल पॉइंट से कर्व परिभाषित करता है। पहला पॉइंट मूवमेंट की शुरुआत और दूसरा अंत को आकार देता है। X समय दर्शाता है जो 0 से 1 तक सीमित है, और Y प्रगति दर्शाता है जहाँ 0 शुरुआती और 1 अंतिम मान है।

Question 3

Y 0 से 1 के बाहर जा सकता है पर X क्यों नहीं?

Accepted Answer

X असली समय से मैप होता है, इसलिए 0 से छोटा या 1 से बड़ा मान कार्य-कारण तोड़ेगा और स्पेक उसे मना करता है। Y आज़ाद है: 1 से ऊपर लक्ष्य पार होता है, 0 से नीचे पहले पीछे हटकर आगे बढ़ता है — Back प्रीसेट का बाउंस यहीं से आता है।

Question 4

ease, ease-in और ease-out में क्या अंतर है?

Accepted Answer

ease ब्राउज़र का डिफ़ॉल्ट है — कोमल शुरुआत और कोमल लैंडिंग; ease-in धीमा शुरू होकर तेज़ खत्म होता है, ease-out तेज़ शुरू होकर धीमा होता है, ease-in-out दोनों का मेल है। जनरेटर में sine, quad, cubic, quart, expo, back और material प्रीसेट भी हैं — कुल 18।

Question 5

बॉल प्रीव्यू कैसे काम करता है?

Accepted Answer

दो गेंदें आपकी सेट की अवधि तक लूप में चलती हैं। ऊपर की गेंद हमेशा रेफ़रेंस के लिए linear (एकसार) चलती है, नीचे की गेंद आपके कर्व के हिसाब से। दोनों के बीच का घटता-बढ़ता फ़ासला दिखाता है कि आपका ईज़िंग ठीक क्या बदलता है।

Question 6

बनाया गया मान कहाँ पेस्ट करें?

Accepted Answer

इसे transition-timing-function या animation-timing-function की वैल्यू की तरह इस्तेमाल करें, जैसे transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. टूल नंगा cubic-bezier(...) फंक्शन देता है जो किसी भी रूल में सीधे टिक जाता है।

Question 7

क्या ईज़िंग फंक्शन एनिमेशन परफ़ॉर्मेंस पर असर डालता है?

Accepted Answer

टाइमिंग फंक्शन खुद मुफ़्त है — वह सिर्फ़ समय के साथ प्रगति की मैपिंग बदलता है। परफ़ॉर्मेंस इस बात पर है कि आप कौन सी प्रॉपर्टी एनिमेट करते हैं: transform और opacity GPU-फ्रेंडली हैं, जबकि width या top जैसी लेआउट प्रॉपर्टी ईज़िंग चाहे जो हो, महँगे रीफ़्लो कराती हैं।

Question 8

सच्चा बाउंस या इलास्टिक इफ़ेक्ट बन सकता है?

Accepted Answer

एक cubic-bezier एक बार ओवरशूट कर सकता है, पर सच्चे बाउंस या इलास्टिक जैसी बहु-बाउंस नहीं बना सकता। उसके लिए @keyframes में कई कीफ़्रेम जोड़ें या Web Animations API लें; एक बार का स्मूद ओवरशूट ही cubic-bezier की खूबी है और यही यह टूल देता है।

Question 9

यहाँ मैं जो करता हूँ क्या वह अपलोड होता है?

Accepted Answer

नहीं। कर्व लोकल कैनवस पर बनता है और प्रीव्यू एनिमेशन पूरी तरह आपके ब्राउज़र में चलता है। कुछ भी सर्वर को नहीं भेजा जाता, इसलिए पेज लोड होने के बाद जनरेटर ऑफ़लाइन भी चलता है।

CSS ईज़िंग जनरेटर

CSS ईज़िंग जनरेटर का उपयोग कैसे करें