अवधि और ईज़िंग
duration-75 से duration-1000 तक के मानों से संक्रमण की अवधि नियंत्रित करें और ease-in, ease-out तथा ease-in-out से समय-निर्धारण फ़ंक्शन सेट करें।
अवधि और ईज़िंग, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
मोशन डिज़ाइन में अवधि और समय-निर्धारण
दो गुण यह नियंत्रित करते हैं कि CSS संक्रमण कैसा महसूस होता है: अवधि (ऐनिमेशन कितनी देर चलता है) और समय-निर्धारण फ़ंक्शन (उस अवधि में ऐनिमेशन कितनी तेज़ी से गति बढ़ाता और घटाता है)। इन्हें सही ढंग से निर्धारित करना ऐसे ऐनिमेशन के बीच का अंतर है जो तेज़ और उद्देश्यपूर्ण लगते हैं और ऐसे ऐनिमेशन के बीच का, जो धीमे या यांत्रिक लगते हैं। Tailwind दोनों के लिए यूटिलिटीज़ उपलब्ध कराता है, जिससे कस्टम CSS के बिना मोशन का अनुभव आसानी से समायोजित किया जा सकता है।
अवधि यूटिलिटीज़
Tailwind की duration-* यूटिलिटीज़ CSS transition-duration गुण सेट करती हैं। मान duration-75 (75ms, बहुत तेज़) से लेकर duration-1000 (1000ms, पूरा एक सेकंड) तक होते हैं। जब आप duration-* क्लास के बिना transition का उपयोग करते हैं, तो डिफ़ॉल्ट अवधि 150ms होती है। प्रतिक्रियाशील महसूस होने के लिए अधिकांश UI इंटरैक्शन 300ms से कम होने चाहिए — इससे अधिक अवधि केवल नाटकीय, पूरे पृष्ठ के ऐनिमेशन के लिए उपयुक्त होती है।
<!-- Available duration utilities -->
duration-75 → 75ms
duration-100 → 100ms
duration-150 → 150ms (default)
duration-200 → 200ms
duration-300 → 300ms
duration-500 → 500ms
duration-700 → 700ms
duration-1000 → 1000ms
<!-- Example: fast button color change -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors duration-150">
Snappy button
</button>सही अवधि चुनना
अवधि बदलाव के महसूस होने वाले आकार के अनुरूप होनी चाहिए। बटन पर होवर, फ़ोकस रिंग और लिंक के रंग में बदलाव जैसे छोटे इंटरैक्शन 100–200ms में सबसे अच्छे लगते हैं। ड्रॉपडाउन का दिखाई देना, कार्ड का फैलना या टूलटिप का धीरे-धीरे गायब होना जैसे मध्यम ट्रांज़िशन 200–300ms में अच्छी तरह काम करते हैं। साइडबार का अंदर की ओर स्लाइड होना, मोडल का दिखाई देना या पेज ट्रांज़िशन जैसी बड़ी गतियाँ 300–500ms तक जा सकती हैं। UI ट्रांज़िशन के लिए कभी भी 500ms से अधिक न जाएँ — उपयोगकर्ताओं को ऐसा महसूस नहीं होना चाहिए कि वे किसी एनीमेशन का इंतज़ार कर रहे हैं।
<!-- 150ms: button hover (small interaction) -->
<button class="transition-colors duration-150 hover:bg-blue-700">Button</button>
<!-- 200ms: card shadow depth change (medium) -->
<div class="transition-shadow duration-200 hover:shadow-lg">Card</div>
<!-- 300ms: dropdown fade in (larger change) -->
<div class="transition-opacity duration-300 opacity-0 data-open:opacity-100">Dropdown</div>
<!-- 500ms: modal entrance (dramatic) -->
<div class="transition-all duration-500 scale-95 data-open:scale-100">Modal</div>टाइमिंग फ़ंक्शन (ईज़िंग)
टाइमिंग फ़ंक्शन (या ईज़िंग फ़ंक्शन) यह नियंत्रित करता है कि एनीमेशन की प्रगति समय के साथ किस प्रकार वितरित होती है। linear एनीमेशन एक समान गति से चलता है। ease-in धीमा शुरू होकर तेज़ होता है। ease-out तेज़ शुरू होकर धीमा होता है। ease-in-out धीमा शुरू और समाप्त होता है, जबकि बीच में तेज़ चलता है। अलग-अलग इंटरैक्शन अलग-अलग ईज़िंग के साथ सबसे स्वाभाविक लगते हैं — बेहतर ईज़िंग चुनना सुसज्जित UI डिज़ाइन का सूक्ष्म लेकिन महत्वपूर्ण विवरण है।
/* Tailwind easing utilities */
ease-linear → cubic-bezier(0, 0, 1, 1) /* constant speed */
ease-in → cubic-bezier(0.4, 0, 1, 1) /* slow start, fast end */
ease-out → cubic-bezier(0, 0, 0.2, 1) /* fast start, slow end */
ease-in-out → cubic-bezier(0.4, 0, 0.2, 1) /* slow start AND end */ease-in बनाम ease-out का उपयोग
ease-in और ease-out के बीच चुनाव का सहज अर्थ होता है: ease-in गति बढ़ाता है (स्क्रीन से बाहर जाने या सिकुड़ने वाले तत्वों के लिए अच्छा), क्योंकि तत्व धीमे शुरू होकर बाहर निकलते समय तेज़ हो जाते हैं। ease-out गति घटाता है (स्क्रीन में प्रवेश करने वाले तत्वों के लिए अच्छा), क्योंकि तत्व तेज़ी से आते हैं और आसानी से अपनी जगह पर स्थिर हो जाते हैं। यह वास्तविक दुनिया के भौतिकी सिद्धांतों जैसा है — रुकने वाली चीज़ें आम तौर पर धीमी होती हैं और शुरू होने वाली चीज़ें तेज़ होती हैं।
<!-- ease-out: element slides INTO view (decelerates on arrival) -->
<div class="-translate-x-full hover:translate-x-0 transition-transform duration-300 ease-out">
Slides in from left, decelerates to stop
</div>
<!-- ease-in: element exits screen (accelerates on departure) -->
<div class="translate-x-0 hover:translate-x-full transition-transform duration-300 ease-in">
Slides out to right, accelerating as it exits
</div>ease-in-out पैटर्न
ease-in-out अधिकांश UI एनीमेशन के लिए सबसे स्वाभाविक गति बनाता है। यह भौतिक वस्तुओं की गति जैसा है: स्थिर अवस्था से शुरू होना, अधिकतम गति तक पहुँचना और फिर धीमा होकर दोबारा स्थिर होना। ऐसी किसी भी एनीमेशन के लिए इसे डिफ़ॉल्ट के रूप में उपयोग करें जिसमें तत्वों का एक स्थान से दूसरे स्थान तक जाना शामिल हो — साइडबार स्लाइड, मोडल का प्रवेश, कार्ड का फैलना और अकॉर्डियन टॉगल, सभी ease-in-out के साथ सबसे स्वाभाविक लगते हैं।
<!-- ease-in-out: sidebar slide-in (feels most natural) -->
<aside class="-translate-x-full group-open:translate-x-0
transition-transform duration-300 ease-in-out
fixed left-0 top-0 h-full w-64 bg-white shadow-xl">
Sidebar content
</aside>
<!-- Accordion expand: ease-in-out for natural feel -->
<div class="max-h-0 overflow-hidden group-open:max-h-96
transition-all duration-300 ease-in-out">
Accordion content
</div>विलंब उपयोगिताएँ
delay-* उपयोगिताएँ CSS की transition-delay प्रॉपर्टी का उपयोग करके ट्रांज़िशन शुरू होने से पहले विराम जोड़ती हैं। क्रमिक एनीमेशन के लिए विलंब उपयोगी होते हैं — तत्वों की श्रृंखला को एक के बाद एक दिखाई देने पर सुंदर क्रमिक प्रभाव बनता है। Tailwind delay-75 (75ms) से delay-1000 (1000ms) तक के विलंब उपलब्ध कराता है। होवर इंटरैक्शन पर विलंब का कम उपयोग करें — केवल होवर पर शुरू होने वाले विलंब उपयोगकर्ताओं को अनुत्तरदायी अनुभव दे सकते हैं।
<!-- Staggered card entrance animations -->
<div class="opacity-0 translate-y-4 animate-show" style="animation-delay: 0ms">Card 1</div>
<div class="opacity-0 translate-y-4 animate-show" style="animation-delay: 100ms">Card 2</div>
<div class="opacity-0 translate-y-4 animate-show" style="animation-delay: 200ms">Card 3</div>
<!-- Or with Tailwind delay utilities -->
<div class="... transition delay-0">First item</div>
<div class="... transition delay-100">Second item</div>
<div class="... transition delay-200">Third item</div>कॉन्फ़िगरेशन में कस्टम अवधि और ईज़िंग
यदि आपके डिज़ाइन सिस्टम को Tailwind के डिफ़ॉल्ट में उपलब्ध न होने वाले विशेष टाइमिंग मानों की आवश्यकता है — जैसे duration-250 या कस्टम cubic-bezier ईज़िंग — तो उन्हें tailwind.config.js में जोड़ें। नए अवधि मानों के लिए transitionDuration और नई ईज़िंग वक्रों के लिए transitionTimingFunction को विस्तारित करें। कस्टम ईज़िंग आपके ब्रांड की गति-संबंधी पहचान व्यक्त कर सकती है, जिससे एनीमेशन स्पष्ट रूप से आपके ब्रांड का अनुभव देते हैं।
// tailwind.config.js
module.exports = {
theme: {
extend: {
transitionDuration: {
'250': '250ms',
'400': '400ms',
'2000': '2000ms',
},
transitionTimingFunction: {
'spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)', // overshoots then settles
'smooth': 'cubic-bezier(0.4, 0.0, 0.2, 1)', // material design standard
'sharp': 'cubic-bezier(0.4, 0.0, 0.6, 1)', // sharp accelerate/decelerate
},
},
},
};होवर इंटरैक्शन के लिए ट्रांज़िशन टाइमिंग
होवर इंटरैक्शन के लिए एक उपयोगी तकनीक अलग-अलग प्रवेश और निकास टाइमिंग रखना है। आप प्रतिक्रियाशील या स्थिति प्रीफ़िक्स के साथ अलग-अलग अवधियाँ लागू करके ऐसा कर सकते हैं। आम तौर पर होवर-इन ट्रांज़िशन, होवर-आउट ट्रांज़िशन से थोड़ा तेज़ होते हैं — प्रवेश चुस्त महसूस होता है और निकास अधिक सहजता से धुंधला होता है। इसके लिए थोड़ी मात्रा में कस्टम CSS या JavaScript क्लास में बदलाव करना पड़ता है, क्योंकि Tailwind में पहले से 'un-hover' वैरिएंट उपलब्ध नहीं है।
/* CSS: different timing for enter vs exit */
.hover-item {
@apply transition-all duration-300 ease-out; /* exit timing */
}
.hover-item:hover {
@apply duration-150; /* shorter on enter (faster response) */
/* Note: Tailwind generates .hover\:duration-150 for this */
}
<!-- Alternative: use hover:duration-* directly in HTML -->
<div class="transition-colors duration-300 hover:duration-150
bg-gray-100 hover:bg-blue-100">
Fast enter, slow exit
</div>प्रदर्शन: will-change और transform
जो तत्व बार-बार एनीमेट होते हैं, उनके लिए आप ब्राउज़र को will-change का संकेत देकर उन्हें अपनी कंपोज़िटर लेयर में भेजने के लिए कह सकते हैं। Tailwind के मुख्य भाग में अंतर्निहित will-change उपयोगिता नहीं है, लेकिन आप मनमाने मानों या कस्टम उपयोगिता के माध्यम से इसे जोड़ सकते हैं। हालांकि, will-change: transform का कम उपयोग करें — बहुत अधिक तत्वों को अलग लेयर में भेजने से मेमोरी व्यर्थ होती है और गति वास्तव में धीमी हो सकती है।
@layer utilities {
.will-change-transform {
will-change: transform;
}
.will-change-opacity {
will-change: opacity;
}
}
<!-- Apply to elements that animate very frequently -->
<div class="transition-transform duration-300 will-change-transform
hover:scale-105">
Frequently animated card (promoted layer)
</div>DevTools में ट्रांज़िशन की डीबगिंग
Chrome DevTools में ट्रांज़िशन की डीबगिंग के लिए उत्कृष्ट उपकरण हैं। सभी चल रहे एनीमेशन और ट्रांज़िशन देखने के लिए Animations पैनल खोलें (More tools → Animations)। आप टाइमलाइन पर आगे-पीछे जा सकते हैं, एनीमेशन को धीमी गति (0.25x, 0.5x) पर फिर चला सकते हैं और गणना की गई टाइमिंग फ़ंक्शन वक्र का निरीक्षण कर सकते हैं। इससे यह जाँचना आसान हो जाता है कि आपकी अवधि और ईज़िंग पसंद ठीक वैसी ही दिख रही हैं जैसी आपने चाही थीं, और तेज़ एनीमेशन पकड़ने के लिए जल्दी-जल्दी होवर करने की आवश्यकता नहीं रहती।
त्वरित जाँच
Tailwind CSS में ट्रांज़िशन अवधि और ईज़िंग की अपनी समझ जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: duration utilities, duration-75 से duration-1000 तक, यह नियंत्रित करती हैं कि ट्रांज़िशन में कितना समय लगेगा; स्क्रीन में प्रवेश करने वाले तत्वों के लिए ease-out और बाहर जाने वाले तत्वों के लिए ease-in सबसे अच्छे हैं; और delay-* उपयोगिताएँ ट्रांज़िशन शुरू होने से पहले विराम जोड़कर क्रमिक एनीमेशन प्रभाव सक्षम करती हैं। अब हम लोडिंग और ध्यान आकर्षित करने वाले पैटर्न के लिए Tailwind के अंतर्निहित कीफ़्रेम एनीमेशन देखेंगे।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “अवधि और ईज़िंग” पाठ निःशुल्क है?
हाँ—“अवधि और ईज़िंग” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“अवधि और ईज़िंग” में मैं क्या सीखूँगा?
duration-75 से duration-1000 तक के मानों से संक्रमण की अवधि नियंत्रित करें और ease-in, ease-out तथा ease-in-out से समय-निर्धारण फ़ंक्शन सेट करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“अवधि और ईज़िंग” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।