@keyframes सिंटैक्स और Animation Property
@keyframes से animation step परिभाषित कीजिए और animation shorthand का उपयोग करके उन्हें लागू करना सीखिए।
@keyframes सिंटैक्स और Animation Property, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
CSS एनिमेशन क्या हैं
CSS एनिमेशन @keyframes का उपयोग करके समय के साथ प्रॉपर्टी में बहु-चरणीय बदलाव करने देते हैं। ट्रांज़िशन के विपरीत, एनिमेशन अपने-आप या क्लास जोड़ने पर शुरू हो सकते हैं और जटिल क्रमों का समर्थन करते हैं।
@keyframes का सिंटैक्स
प्रतिशत (0% से 100%) या from/to कीवर्ड का उपयोग करके एनिमेशन के चरण परिभाषित करें:
<div class="fade-demo">Fades in</div>
<div class="pulse-demo"></div>
एनीमेशन प्रॉपर्टी
animation शॉर्टहैंड या उसकी उप-प्रॉपर्टी का उपयोग करके किसी तत्व पर एनिमेशन लागू करें:
<h1 class="hero-text">Welcome!</h1>
एनीमेशन-नाम
नाम के आधार पर @keyframes नियम का संदर्भ देता है:
<div class="spinner"></div>
एनीमेशन-अवधि
सेट करता है कि एनिमेशन का एक चक्र पूरा होने में कितना समय लगेगा:
<div class="pulse"></div>
एकाधिक एनिमेशन चरण
जटिल बहु-चरणीय एनिमेशन के लिए प्रतिशत वाले कीफ़्रेम का उपयोग करें:
<div class="slide-demo">Sliding in</div>
एकाधिक प्रॉपर्टी को एनिमेट करना
हर कीफ़्रेम चरण में एक साथ कई प्रॉपर्टी को एनिमेट किया जा सकता है:
<div class="bounce-demo"></div>
हर कीफ़्रेम के लिए एनीमेशन-टाइमिंग-फ़ंक्शन
टाइमिंग फ़ंक्शन हर कीफ़्रेम चरण के लिए सेट किया जा सकता है। इससे पूरे एनिमेशन के बजाय अलग-अलग मार्ग-बिंदुओं के बीच की ईज़िंग नियंत्रित होती है।
एकाधिक एनिमेशन
अल्पविराम से अलग किए गए मानों का उपयोग करके एक तत्व पर कई एनिमेशन लागू करें:
<div class="element">Two animations combined</div>
एनीमेशन-प्ले-स्टेट
एनिमेशन को गतिशील रूप से रोकें और फिर से शुरू करें:
<div class="card">Hover the card to pause<div class="spinner"></div></div>
CSS एनिमेशन बनाम ट्रांज़िशन: सारांश
समझदारी से चुनें:
- ट्रांज़िशन: दो स्थितियाँ, स्थिति बदलने पर सक्रिय, सरल
- एनिमेशन: बहु-चरणीय, अपने-आप शुरू होने वाला, दोहराव वाला, अधिक नियंत्रण
त्वरित जाँच
कौन-सा @keyframes कीवर्ड एनिमेशन की प्रारंभिक स्थिति दर्शाता है?
पुनरावृत्ति
@keyframes का उपयोग करके from/to या प्रतिशत वाले मार्ग-बिंदुओं से एनिमेशन के चरण परिभाषित करें। नाम, अवधि, टाइमिंग और फ़िल-मोड बताने वाले animation शॉर्टहैंड से इसे लागू करें। कई एनिमेशन को अल्पविराम से अलग किया जाता है। सरल दो-स्थिति वाले बदलावों के लिए ट्रांज़िशन और जटिल क्रमों के लिए एनिमेशन का उपयोग करें।
एआई शिक्षक के साथ CSS सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “@keyframes सिंटैक्स और Animation Property” पाठ निःशुल्क है?
हाँ—“@keyframes सिंटैक्स और Animation Property” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“@keyframes सिंटैक्स और Animation Property” में मैं क्या सीखूँगा?
@keyframes से animation step परिभाषित कीजिए और animation shorthand का उपयोग करके उन्हें लागू करना सीखिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“@keyframes सिंटैक्स और Animation Property” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- @keyframes सिंटैक्स और Animation Property
- Animation Direction, Fill-Mode और Iteration
- Animation को Chain और Sequence करना
- prefers-reduced-motion के साथ Accessible Animation