Animation को Chain और Sequence करना
Staggered delay के साथ कई animation को chain करके जटिल sequence बनाना सीखिए।
Animation को Chain और Sequence करना, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
एनिमेशन का क्रम क्यों बनाएँ
जटिल UI प्रभावों के लिए अक्सर क्रम से होने वाले कई एनिमेशन चाहिए होते हैं: कोई तत्व अंदर आता है, रुकता है, फिर धीरे-धीरे गायब होता है। CSS JavaScript के बिना एनिमेशन को जोड़ने के कई साधन देता है।
क्रम बनाने के लिए एनीमेशन-विलंब का उपयोग
सबसे सरल क्रम-निर्माण तरीका है: पिछले एनिमेशन की अवधि के आधार पर गणना करें कि अगला एनिमेशन कब शुरू होना चाहिए:
<div class="element">Slides in, then fades out</div>
बहु-चरणीय कीफ़्रेम
एकल तत्व के लिए सबसे साफ़ तरीका है: प्रतिशत वाले मार्ग-बिंदुओं के साथ एक @keyframes नियम में पूरा क्रम लिखें:
<div class="toast">Notification toast</div>
अवधि के लिए CSS कस्टम प्रॉपर्टी
जुड़े हुए एनिमेशन के बीच आसानी से समन्वय करने के लिए अवधि को CSS वेरिएबल में रखें:
<div class="box">Custom-property-driven timing</div>
एनीमेशन-टाइमलाइन (आधुनिक)
वेब एनिमेशन एपीआई और स्क्रॉल-लिंक किए गए एनिमेशन (ScrollTimeline) विलंब की गणना किए बिना उन्नत क्रम-निर्माण की सुविधा देते हैं। जटिल CSS एनिमेशन के समन्वय का भविष्य यही है।
CSS कस्टम प्रॉपर्टी से क्रमिकता
inline या JavaScript के माध्यम से सेट की गई CSS कस्टम प्रॉपर्टी से क्रमिक विलंब नियंत्रित करें:
<div class="item" style="--delay:0ms">Item 1</div>
<div class="item" style="--delay:120ms">Item 2</div>
<div class="item" style="--delay:240ms">Item 3</div>
JavaScript से संचालित क्रम-निर्माण
सटीक बहु-तत्व क्रमों के लिए वेब एनिमेशन एपीआई या GSAP जैसी लाइब्रेरी का उपयोग करें। जटिल परस्पर निर्भरताओं वाले स्वतंत्र तत्वों के समन्वय में केवल CSS की क्षमता सीमित है।
ध्यान आकर्षित करने वाले एनिमेशन
पहले स्पंदित और फिर स्थिर होने वाला ध्यान आकर्षित करने का एनिमेशन क्रम:
<div class="notification">New message!</div>
AnimationEnd इवेंट
अगले चरण को प्रोग्राम के माध्यम से शुरू करने के लिए JavaScript में animationend को सुनें:
<div class="box" id="ae-box">Watch me</div>
<script>
const el = document.getElementById('ae-box');
el.addEventListener('animationend', (e) => {
if (e.animationName === 'slideIn') {
el.classList.add('phase-2');
el.textContent = 'animationend fired!';
}
});
</script>
पृष्ठ ट्रांज़िशन पैटर्न
क्लास टॉगल करने वाला CSS पृष्ठ ट्रांज़िशन क्रम:
<div class="page-leaving">Leaving page</div>
<div class="page-entering">Entering page</div>
लोडिंग स्थिति का कंकाल
ऑफ़सेट का उपयोग करने वाला बहु-चरणीय कंकाल लोडिंग एनिमेशन:
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
त्वरित जाँच
CSS में किसी एक तत्व के लिए पूरा बहु-चरणीय एनिमेशन क्रम लिखने का सबसे अच्छा तरीका क्या है?
पुनरावृत्ति
CSS एनिमेशन का क्रम पिछले एनिमेशन की अवधि के अनुसार तय किए गए विलंब, प्रतिशत वाले मार्ग-बिंदुओं के साथ बहु-चरणीय @keyframes, या अवधि के लिए कस्टम प्रॉपर्टी वेरिएबल से बनाया जाता है। animationend इवेंट JavaScript से शुरू किए गए क्रमिक चरणों को सक्षम करता है। जटिल बहु-तत्व समन्वय के लिए वेब एनिमेशन एपीआई पर विचार करें।
एआई शिक्षक के साथ CSS सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “Animation को Chain और Sequence करना” पाठ निःशुल्क है?
हाँ—“Animation को Chain और Sequence करना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Animation को Chain और Sequence करना” में मैं क्या सीखूँगा?
Staggered delay के साथ कई animation को chain करके जटिल sequence बनाना सीखिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“Animation को Chain और Sequence करना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- @keyframes सिंटैक्स और Animation Property
- Animation Direction, Fill-Mode और Iteration
- Animation को Chain और Sequence करना
- prefers-reduced-motion के साथ Accessible Animation