कॉन्फ़िगरेशन में कस्टम ऐनिमेशन
tailwind.config.js में कस्टम कीफ़्रेम और ऐनिमेशन यूटिलिटी परिभाषित करें और अपने मार्कअप में animate-* वर्गों से उनका संदर्भ दें।
कॉन्फ़िगरेशन में कस्टम ऐनिमेशन, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
चार अंतर्निहित एनीमेशन से आगे
Tailwind के चार अंतर्निहित एनीमेशन सामान्य लोडिंग और ध्यान आकर्षित करने वाले पैटर्न को कवर करते हैं, लेकिन वास्तविक प्रोजेक्ट में अक्सर अतिरिक्त एनीमेशन की आवश्यकता होती है: सामग्री के प्रवेश के लिए फ़ेड-इन प्रभाव, अंदर आने वाले साइडबार, फ़ॉर्म त्रुटियों के लिए शेक प्रभाव या कस्टम पल्स विविधताएँ। अपने कॉन्फ़िगरेशन में theme.extend.keyframes और theme.extend.animation में प्रविष्टियाँ जोड़कर आप नई animate-* उपयोगिताएँ बनाते हैं, जो अंतर्निहित उपयोगिताओं की तरह ही काम करती हैं।
कस्टम कीफ़्रेम परिभाषित करना
theme.extend.keyframes में कस्टम CSS कीफ़्रेम जोड़ें। ऑब्जेक्ट की प्रत्येक कुंजी कीफ़्रेम नाम बन जाती है। मान एक ऑब्जेक्ट होता है, जिसमें कुंजियाँ प्रतिशत स्ट्रिंग या 'from'/'to' कीवर्ड होती हैं और मान CSS प्रॉपर्टी ऑब्जेक्ट होते हैं। Tailwind इस ऑब्जेक्ट नोटेशन को संकलित आउटपुट में @keyframes CSS नियम में बदल देता है। कीफ़्रेम चरणों के भीतर आप किसी भी एनीमेट की जा सकने वाली CSS प्रॉपर्टी का उपयोग कर सकते हैं।
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
// Fade in from transparent
'fade-in': {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
// Slide up from below
'slide-up': {
'0%': { opacity: '0', transform: 'translateY(16px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
// Shake (for errors)
'shake': {
'0%, 100%': { transform: 'translateX(0)' },
'20%, 60%': { transform: 'translateX(-8px)' },
'40%, 80%': { transform: 'translateX(8px)' },
},
},
},
},
};कस्टम एनीमेशन उपयोगिताओं को पंजीकृत करना
कीफ़्रेम परिभाषित करने के बाद, उन्हें theme.extend.animation में नामित एनीमेशन के रूप में पंजीकृत करें। मान CSS एनीमेशन का संक्षिप्त स्ट्रिंग रूप होता है: name duration timing-function delay iteration-count direction fill-mode। नाम theme.extend.keyframes में परिभाषित किसी कीफ़्रेम से मेल खाना चाहिए। Tailwind प्रत्येक प्रविष्टि के लिए animate-{key} उपयोगिता क्लास बनाता है।
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: { /* ... defined above ... */ },
animation: {
'fade-in': 'fade-in 0.3s ease-out',
'slide-up': 'slide-up 0.4s ease-out',
'shake': 'shake 0.5s ease-in-out 1',
// Multiple values
'fade-in-slow': 'fade-in 1s ease-in-out',
// Infinite loop
'fade-in-out': 'fade-in 1.5s ease-in-out infinite alternate',
},
},
},
};HTML में कस्टम एनीमेशन का उपयोग
कॉन्फ़िगरेशन में पंजीकृत करने के बाद, कस्टम ऐनिमेशन आपके HTML में animate-{key} क्लास के रूप में उपलब्ध हो जाते हैं। ये बिल्ट-इन animate यूटिलिटी की तरह ही काम करते हैं और इन्हें रिस्पॉन्सिव प्रीफ़िक्स, state वैरिएंट और एक्सेसिबिलिटी के लिए motion-reduce: वैरिएंट के साथ जोड़ा जा सकता है। क्लास मौजूद होने पर ऐनिमेशन चलता है और क्लास हटाने पर रुक जाता है — JavaScript से शुरू किए जाने वाले प्रवेश प्रभावों के लिए यह बिल्कुल उपयुक्त है।
<!-- Fade in a card on page load -->
<div class="animate-fade-in bg-white rounded-xl p-6 shadow">
Content fades in smoothly
</div>
<!-- Slide up with a slight delay using inline style -->
<div class="animate-slide-up" style="animation-delay: 150ms">
Content slides up after 150ms delay
</div>
<!-- Shake an input on validation error -->
<input
id="email"
class="border border-red-500 animate-shake focus:outline-none px-4 py-2 rounded-lg w-full"
type="email"
placeholder="Invalid email"
/>कंटेंट के लिए प्रवेश ऐनिमेशन
प्रवेश ऐनिमेशन (fade-in, slide-up, scale-in) कंटेंट के दिखाई देने पर उसे जीवंत बनाते हैं। ये तब सबसे प्रभावी होते हैं जब कंटेंट पहली बार viewport में प्रवेश करता है — पेज लोड होने पर या स्क्रॉल करते समय कोई सेक्शन दिखाई देने पर। प्रवेश की अवधि 200–400ms के बीच रखें और इसे हमेशा उपयुक्त easing के साथ इस्तेमाल करें। एलिमेंट के स्क्रॉल करके दृश्य क्षेत्र में आने पर ऐनिमेशन शुरू करने के लिए JavaScript में Intersection Observer API का उपयोग करें।
// JavaScript: trigger animation when element enters viewport
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-slide-up');
observer.unobserve(entry.target); // animate once
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
observer.observe(el);
});
<!-- HTML: starts invisible, gets class on scroll -->
<div class="opacity-0 animate-on-scroll">Animated on scroll</div>अधिक जटिल कीफ़्रेम उदाहरण
जटिल ऐनिमेशन में कई चरणों वाली गति बनाने के लिए कीफ़्रेम प्रतिशत के अधिक चरणों का उपयोग किया जाता है। heartbeat ऐनिमेशन दोहरी धड़कन की लय के साथ पहले आकार बढ़ाता है और फिर घटाता है। flash ऐनिमेशन किसी एलिमेंट को पृष्ठभूमि के रंग से थोड़ी देर के लिए उभारता है। slide-in-right ऐनिमेशन एक साथ स्थान बदलता और धीरे-धीरे दिखाई देता है। इन संयुक्त ऐनिमेशन में गति के प्रत्येक चरण का सटीक वर्णन करने के लिए प्रतिशत के कई चरण आवश्यक होते हैं।
// tailwind.config.js
keyframes: {
'heartbeat': {
'0%, 100%': { transform: 'scale(1)' },
'14%': { transform: 'scale(1.3)' },
'28%': { transform: 'scale(1)' },
'42%': { transform: 'scale(1.3)' },
'70%': { transform: 'scale(1)' },
},
'flash': {
'0%, 50%, 100%': { opacity: '1' },
'25%, 75%': { opacity: '0.25' },
},
'slide-in-right': {
'0%': { opacity: '0', transform: 'translateX(32px)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
},
animation: {
'heartbeat': 'heartbeat 1.2s ease-in-out infinite',
'flash': 'flash 0.5s ease-in-out',
'slide-in-right': 'slide-in-right 0.3s ease-out',
}ऐनिमेशन का फ़िल मोड
CSS की animation-fill-mode प्रॉपर्टी यह नियंत्रित करती है कि ऐनिमेशन शुरू होने से पहले (यदि विलंब हो) और समाप्त होने के बाद क्या होगा। forwards ऐनिमेशन समाप्त होने के बाद एलिमेंट को उसकी अंतिम state में रखता है — एक बार चलने वाले प्रवेश ऐनिमेशन के लिए यह ज़रूरी है, जब आप चाहते हैं कि एलिमेंट दिखाई देता रहे। backwards विलंब की अवधि में पहला फ़्रेम लागू करता है, ताकि एलिमेंट सही शुरुआती state से शुरू हों। अपने ऐनिमेशन के संक्षिप्त लेखन वाले स्ट्रिंग में फ़िल मोड शामिल करें।
// animation shorthand: name | duration | easing | delay | count | fill-mode
animation: {
// 'forwards' keeps final state (element stays visible after fading in)
'fade-in': 'fade-in 0.3s ease-out forwards',
// 'backwards' applies frame-0 during delay (starts transparent during delay)
'fade-in-delayed': 'fade-in 0.4s ease-out 0.2s backwards',
// No fill mode: jumps back to initial state after animation
'shake': 'shake 0.5s ease-in-out',
}ऐनिमेशन रोकना और फिर शुरू करना
आप animation-play-state: paused का उपयोग करके Tailwind ऐनिमेशन को रोक सकते हैं। कोई कस्टम यूटिलिटी क्लास जोड़ें या कोई मनमाना मान इस्तेमाल करें: [animation-play-state:paused]। यह तब उपयोगी है जब पेज दिखाई न दे रहा हो और आप लोडिंग ऐनिमेशन रोकना चाहते हों (Page Visibility API का उपयोग करके), या जब आप उपयोगकर्ताओं को कंटेंट के साथ इंटरैक्ट करने का समय देने के लिए hover ऐनिमेशन रोकना चाहते हों। Tailwind में पहले से उपलब्ध pause यूटिलिटी नहीं है, लेकिन मनमाना CSS या कस्टम यूटिलिटी इस आवश्यकता को पूरा कर देती है।
@layer utilities {
.animation-paused { animation-play-state: paused; }
.animation-running { animation-play-state: running; }
}
<!-- Pause animation on hover -->
<div class="animate-pulse hover:animation-paused bg-gray-200 rounded h-4 w-48">
Pauses pulsing when hovered
</div>
<!-- JavaScript: pause when page is hidden -->
document.addEventListener('visibilitychange', () => {
const spinners = document.querySelectorAll('.animate-spin');
spinners.forEach(el => {
el.style.animationPlayState = document.hidden ? 'paused' : 'running';
});
});कस्टम ऐनिमेशन में कम गति का सम्मान करना
आपके बनाए हर कस्टम ऐनिमेशन के लिए motion-reduce: उपचार भी होना चाहिए। सबसे सरल तरीका motion-reduce:animate-none है, जो ऐनिमेशन को पूरी तरह बंद कर देता है। प्रवेश ऐनिमेशन में, यदि आप फिर भी अंतिम state दिखाना चाहते हैं, तो motion-reduce:opacity-100 को motion-reduce:animate-none के साथ इस्तेमाल करें, ताकि fade-in ऐनिमेशन छोड़ दिए जाने पर भी एलिमेंट दिखाई दे।
<!-- Accessible entrance animation -->
<div
class="
opacity-0 animate-fade-in
motion-reduce:opacity-100 motion-reduce:animate-none
"
>
Content visible immediately for reduced-motion users,
fades in for others
</div>
<!-- Accessible slide-up -->
<div
class="
opacity-0 translate-y-4 animate-slide-up
motion-reduce:opacity-100 motion-reduce:translate-y-0 motion-reduce:animate-none
"
>
Reduced motion: appears instantly at final position
</div>Tailwind के साथ तृतीय-पक्ष ऐनिमेशन लाइब्रेरी
अधिक उन्नत ऐनिमेशन — जैसे spring physics, स्क्रॉल-आधारित ऐनिमेशन या जटिल choreography — के लिए tailwindcss-animate, Framer Motion (React) या GSAP जैसी तृतीय-पक्ष लाइब्रेरी Tailwind के साथ अच्छी तरह एकीकृत होती हैं। Tailwindcss-animate एक प्लगइन के रूप में पहले से बने कीफ़्रेम का समृद्ध संग्रह (accordion-down, accordion-up, fade-in आदि) प्रदान करता है और आपकी उपलब्ध animate-* यूटिलिटी को तुरंत बढ़ाता है। shadcn/ui कॉम्पोनेंट में इसका डिफ़ॉल्ट रूप से उपयोग किया जाता है।
// Install tailwindcss-animate
// npm install tailwindcss-animate
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-animate'),
],
};
<!-- Now you have many new animate-* utilities -->
<div class="animate-in fade-in slide-in-from-bottom-4 duration-300">
Animated with tailwindcss-animate
</div>
<div class="animate-out fade-out slide-out-to-top-4 duration-200">
Exit animation
</div>कस्टम ऐनिमेशन की डीबगिंग
कस्टम ऐनिमेशन की जाँच और डीबग करने के लिए Chrome DevTools के Animations पैनल का उपयोग करें। Elements पैनल में एलिमेंट चुनें, फिर Animations पैनल खोलें। ऐनिमेशन चलाने पर आपको समय-सूचक चिह्नों के साथ कीफ़्रेम वक्र का दृश्य रूप दिखाई देगा। प्रत्येक चरण की ध्यानपूर्वक जाँच करने के लिए प्लेबैक को 0.25x गति तक धीमा किया जा सकता है। यह पैनल आवश्यकतानुसार ऐनिमेशन को फिर से चलाने की सुविधा भी देता है, जो प्रवेश ऐनिमेशन पकड़ने के लिए पेज रीफ़्रेश करने से कहीं आसान है।
त्वरित जाँच
Tailwind config में कस्टम ऐनिमेशन की अपनी समझ को परखें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: theme.extend.keyframes में कस्टम कीफ़्रेम परिभाषित करना और उन्हें theme.extend.animation में यूटिलिटी के रूप में पंजीकृत करना, एक बार चलने वाले ऐसे प्रवेश ऐनिमेशन के लिए animation fill-mode forwards का उपयोग करना जिन्हें अपनी अंतिम state बनाए रखनी चाहिए, और एक्सेसिबिलिटी के लिए कस्टम ऐनिमेशन के साथ हमेशा motion-reduce:animate-none का उपयोग करना। इससे Animations and Transitions पाठ्यक्रम पूरा होता है — अब हम बेहतर कॉम्पोनेंट पैटर्न बनाएँगे।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “कॉन्फ़िगरेशन में कस्टम ऐनिमेशन” पाठ निःशुल्क है?
हाँ—“कॉन्फ़िगरेशन में कस्टम ऐनिमेशन” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“कॉन्फ़िगरेशन में कस्टम ऐनिमेशन” में मैं क्या सीखूँगा?
tailwind.config.js में कस्टम कीफ़्रेम और ऐनिमेशन यूटिलिटी परिभाषित करें और अपने मार्कअप में animate-* वर्गों से उनका संदर्भ दें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“कॉन्फ़िगरेशन में कस्टम ऐनिमेशन” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- संक्रमण यूटिलिटी
- अवधि और ईज़िंग
- अंतर्निर्मित कीफ़्रेम ऐनिमेशन
- कॉन्फ़िगरेशन में कस्टम ऐनिमेशन