कल्पना करू: अहाँ कोनो नव प्रोजेक्ट मे शामिल भ' जाइत छी, कोडबेस मे गोता लगाउ, आ पहिल किछु घंटाक भीतर, अहाँ केँ किछु निराशाजनक रूप सँ परिचित चीजक पता चलैत अछि. स्टाइलशीट भर म॑ बिखरी क॑, आपक॑ एक ही बेसिक एनीमेशन लेली कई @keyframes परिभाषा मिलै छै । तीन अलग-अलग फेड-इन इफेक्ट, दू-तीन स्लाइड भिन्नता, मुट्ठी भर जूम एनीमेशन, आ कम सं कम दू अलग-अलग स्पिन एनीमेशन कारण, खैर, किएक नहिं ? @ कीफ्रेम्स पल्स { से { पैमाना: 1; } . के { पैमाना: 1.1; } . } .
@ keyframes बड़ा-पल्स { ०%, २०%, १००% { पैमाना: 1; } . १०%, ४०% { १. पैमाना: 1.2; } . } .
जँ ई परिदृश्य परिचित लागय त’ अहाँ असगर नहि छी. विभिन्न परियोजना के पार हमरऽ अनुभव म॑, हम्मं॑ जे सबसें लगातार त्वरित जीत द॑ सकै छियै, ओकरा म॑ स॑ एगो छै कीफ्रेम क॑ समेकित आरू मानकीकरण । ई एतेक विश्वसनीय पैटर्न बनि गेल अछि जे आब हम एहि सफाई के कोनो नव कोडबेस पर अपन पहिल काज मे स’ एक के रूप मे बेसब्री स’ इंतजार क’ रहल छी. अराजकता के पाछु के तर्क ई अतिरेक जखन सोचैत छी त एकदम सार्थक अछि। हम सब अपन दिन-प्रतिदिन के काज में एकहि मौलिक एनीमेशन के उपयोग करैत छी: फीका, स्लाइड, जूम, स्पिन, आ अन्य आम प्रभाव. ई एनीमेशन काफी सीधा छै, आरू काम पूरा करै लेली एक त्वरित @keyframes परिभाषा क॑ चाबुक मारना आसान छै. केंद्रीकृत एनीमेशन प्रणाली के बिना, डेवलपर स्वाभाविक रूप स॑ ई कीफ्रेम क॑ नयऽ सिरा स॑ लिखै छै, ई बात स॑ अनजान कि कोडबेस म॑ अन्य जगहऽ प॑ भी ऐन्हऽ ही एनीमेशन पहिने स॑ मौजूद छै । ई खास करी क॑ घटक आधारित आर्किटेक्चर म॑ काम करला प॑ आम बात छै (जेकरा हम्मं॑ अधिकांश आजकल करै छियै), कैन्हेंकि टीम अक्सर एप्लीकेशन केरऽ अलग-अलग भागऽ म॑ समानांतर रूप स॑ काम करै छै । परिणाम ? एनीमेशन अराजकता। छोट समस्या कीफ्रेम डुप्लिकेशन के साथ सबसें स्पष्ट मुद्दा विकास समय बर्बाद आरू अनावश्यक कोड ब्लोट छै. एक सं बेसि कीफ्रेम परिभाषा कें मतलब छै की आवश्यकता बदलला पर अपडेट करय कें लेल कईटा स्थान. अपन फीका एनीमेशन के समय समायोजित करय के जरूरत अछि? अहां के अपन कोडबेस भर मे हर इंस्टेंस के शिकार करय पड़त. ईजिंग फंक्शन के मानकीकरण करय चाहैत छी? सब भिन्नता खोजने के शुभकामना। रखरखाव बिंदुअक कें इ गुणा सरल एनीमेशन अपडेट कें सेहो समय लेने काज बनायत छै. बड़का समस्या ई कीफ्रेम डुप्लिकेशन सतह के नीचे लुकाय क॑ बहुत अधिक कपटी समस्या पैदा करै छै: वैश्विक दायरा जाल । घटक आधारित आर्किटेक्चर कें साथ काम करय कें समय भी, सीएसएस कीफ्रेम हमेशा वैश्विक दायरा मे परिभाषित कैल जायत छै. एकर मतलब छै कि सबटा कीफ्रेम सब घटक पर लागू होयत छै. सदिखन। हाँ, जरूरी नै छै कि आपकऽ एनीमेशन म॑ वू कीफ्रेम के उपयोग करलऽ जाय जेकरा आपने अपनऽ घटक म॑ परिभाषित करलऽ छै । ई अंतिम कीफ्रेम के उपयोग करै छै जे ठीक वैह नाम स॑ मेल खाबै छै जे वैश्विक दायरा म॑ लोड करलऽ गेलऽ छेलै । जा धरि अहाँक सभ कीफ्रेम एक समान रहत, ई एकटा छोट मुद्दा बुझना जा सकैत अछि । मुदा जखन अहाँ कोनो विशिष्ट यूज केस लेल एनीमेशन केँ कस्टमाइज करय चाहैत छी, अहाँ परेशानी मे पड़ि जायब, वा एहि सँ बेसी खराब, अहाँ एकर कारण बनब. या त’ अहाँक एनीमेशन काज नहि करत किएक त’ अहाँक बाद कोनो आन घटक लोड भ’ गेल, अहाँक कीफ्रेम केँ ओवरराइट भ’ गेल, वा अहाँक घटक अंतिम बेर लोड भ’ जाइत अछि आ गलती सँ ओहि कीफ्रेम केर नामक उपयोग करैत हर दोसर घटकक लेल एनीमेशन व्यवहार बदलि दैत अछि, आ भ’ सकैत अछि जे अहाँ केँ एकर अहसास तक नहि भ’ सकैत अछि. एहि ठाम एकटा सरल उदाहरण अछि जे समस्या केँ दर्शाबैत अछि: .घटक-एक { /* घटक शैलियाँ */ एनीमेशन: नाड़ी 1s आसान-में-बाहर अनंत वैकल्पिक; } .
/* ई @keyframes परिभाषा काज नहि करत */ @ कीफ्रेम्स पल्स { से { पैमाना: 1; } . के { पैमाना: 1.1; } . } .
/* बाद मे कोड मे... */
.घटक-दो { /* घटक शैलियाँ */ एनीमेशन: नाड़ी 1s आसानी-में-बाहर अनंत; } .
/* ई कीफ्रेम दुनू घटक पर लागू होयत */ @ कीफ्रेम्स पल्स { ०%, २०%, १००% { पैमाना: 1; } . १०%, ४०% { १. पैमाना: 1.2; } . } .
दुनू घटक एकहि एनीमेशन नाम क उपयोग करैत अछि, मुदा दोसर @keyframes परिभाषा पहिल कए ओवरराइट क दैत अछि । आब घटक-एक आ घटक-दू दुनू दोसर कीफ्रेम क उपयोग करत, चाहे कोन घटक कोन कीफ्रेम परिभाषित केने हो । देखू पेन कीफ्रेम टोकन - डेमो 1 [कांटा] अमित शीन द्वारा। सबसँ खराब बात? ई अक्सर स्थानीय विकास म॑ एकदम सही काम करै छै लेकिन उत्पादन म॑ रहस्यमय रूप स॑ टूटी जाय छै जब॑ बिल्ड प्रक्रिया आपकऽ स्टाइलशीट केरऽ लोडिंग क्रम म॑ बदलाव करै छै । अहाँक अंत मे एनीमेशन होइत अछि जे एहि बात पर निर्भर करैत अछि जे कोन घटक आ कोन क्रम मे लोड अछि । समाधान : एकीकृत कीफ्रेम ई अराजकता केरऽ जवाब आश्चर्यजनक रूप स॑ सरल छै: पूर्व परिभाषित डायनामिक कीफ्रेम जे साझा स्टाइलशीट म॑ संग्रहीत छै । हर घटक क॑ अपनऽ एनीमेशन क॑ परिभाषित करै के बजाय, हम्मं॑ केंद्रीकृत कीफ्रेम बनाबै छियै जे अच्छा तरह स॑ दस्तावेजीकरण करलऽ गेलऽ छै, जेकरा म॑ आसान छैउपयोग, रखरखाव योग्य, आ अहां कें परियोजना कें विशिष्ट जरूरतक कें अनुरूप. एकरा कीफ्रेम टोकन बुझू। जेना हम रंग आ स्पेसिंग के लेल टोकन के उपयोग करैत छी, आ हमरा सब में स बहुतो लोक पहिने स एनीमेशन गुण के लेल टोकन के उपयोग करैत छी, जेना कि अवधि आ ईजिंग फंक्शन, तहिना कीफ्रेम के लेल सेहो टोकन के उपयोग किया नै करब? इ दृष्टिकोण कोनों वर्तमान डिजाइन टोकन कार्यप्रवाह कें साथ स्वाभाविक रूप सं एकीकृत भ सकय छै जेकर उपयोग अहां कयर रहल छी, जखन कि छोट समस्या (कोड डुप्लिकेशन) आ पैघ समस्या (ग्लोबल स्कोप टकराव) दूनू कें एक बेर मे हल कयर सकय छै. विचार सोझ छै: हमरऽ सब आम एनीमेशन लेली सत्य केरऽ एकल स्रोत बनाबै । ई साझा स्टाइलशीट म॑ सावधानी स॑ तैयार करलऽ गेलऽ कीफ्रेम छै जे एनीमेशन पैटर्न क॑ कवर करै छै जेकरा हमरऽ प्रोजेक्ट वास्तव म॑ उपयोग करै छै । आब ई अनुमान नहि लगाओल जा सकैत अछि जे हमरा सभक कोडबेस मे कतहु फेड एनीमेशन पहिने सँ मौजूद अछि कि नहि । आब गलती स अन्य घटक स एनीमेशन ओवरराइट करब नहि। मुदा एत’ कुंजी अछि : ई सभ मात्र स्थिर कॉपी-पेस्ट एनीमेशन नहिं अछि. ई CSS कस्टम गुण के माध्यम स॑ गतिशील आरू अनुकूलन योग्य होय लेली डिजाइन करलऽ गेलऽ छै, जेकरा स॑ हमरा स्थिरता क॑ बनाए रखै के अनुमति मिलै छै जबकि अभी भी एनीमेशन क॑ विशिष्ट उपयोग केसऽ के अनुकूल बनाबै के लचीलापन छै, जेना कि अगर आपक॑ एक जगह प॑ कनी बड़ऽ “पल्स” एनीमेशन के जरूरत छै । पहिल कीफ्रेम टोकन के निर्माण पहिल कम लटकल फल मे स एकटा जे हमरा सब कए निपटबाक चाही ओ अछि “फेड-इन” एनीमेशन । हमर एकटा हालिया प्रोजेक्ट मे हमरा दर्जन भरि सँ बेसी अलग-अलग फेड-इन परिभाषा भेटल, आ हाँ, ओ सब बस अपारदर्शिता केँ 0 सँ 1 धरि एनिमेट क' देलक. अस्तु, एकटा नव स्टाइलशीट बनाबी, एकरा kf-tokens.css कहू, ओकरा अपन प्रोजेक्ट मे आयात करी, आ ओकर भीतर उचित टिप्पणीक संग अपन कीफ्रेम राखी. /* कीफ्रेम-टोकन.सीएसएस */
/* * फीका में - फीका प्रवेश एनीमेशन * उपयोग: एनीमेशन: kf-फीका-में 0.3s आसान-बाहर; */ @ keyframes kf-फीका-में { से { अस्पष्टता: 0; } . के { अस्पष्टता: 1; } . } .
ई एकल @keyframes घोषणा हमरऽ कोडबेस भर म॑ वू सब बिखरी गेलऽ फेड-इन एनीमेशन के जगह लै छै । स्वच्छ, सरल, आ वैश्विक स्तर पर लागू। आ आब जखन हमरा सभ लग ई टोकन परिभाषित भ' गेल अछि, तखन हम एकर उपयोग अपन पूरा प्रोजेक्ट मे कोनो घटक सं क' सकैत छी: .मोडल { . एनीमेशन: kf-फीका-में 0.3s आसान-बाहर; } .
.टूलटिप { एनीमेशन: kf-फीका-में 0.2s आसान-में-बाहर; } .
.सूचना { . एनीमेशन: kf-फीका-में 0.5s आसान-बाहर; } .
देखू पेन कीफ्रेम टोकन - डेमो 2 [कांटा] अमित शीन द्वारा। नोट: हम अपन सभ @keyframes नाम मे kf- उपसर्ग के प्रयोग क’ रहल छी. ई उपसर्ग एकटा नेमस्पेस के रूप म॑ काम करै छै जे परियोजना म॑ मौजूदा एनीमेशन के साथ नामकरण के टकराव क॑ रोकै छै आरू तुरंत ई साफ करै छै कि ई कीफ्रेम हमरऽ कीफ्रेम टोकन फाइल स॑ आबै छै । एक गतिशील स्लाइड बनाना kf-fade-in कीफ्रेम बहुत नीक काज करैत अछि किएक त ई सरल अछि आओर एहि मे गड़बड़ी करय के गुंजाइश कम अछि. लेकिन अन्य एनीमेशन म॑ हमरा सब क॑ बहुत अधिक गतिशील होय के जरूरत छै, आरू यहाँ हम्मं॑ CSS कस्टम प्रॉपर्टी केरऽ विशाल शक्ति के लाभ उठाय सकै छियै । इ ओ जगह छै जतय कीफ्रेम टोकन वास्तव मे बिखरल स्थिर एनीमेशन कें तुलना मे चमकै छै. एकटा आम परिदृश्य ली : “स्लाइड-इन” एनीमेशन | मुदा कतय सँ फिसल जाउ? दाहिना दिससँ 100px? बामा दिस स 50%? की एकरा स्क्रीन के ऊपर स प्रवेश करबाक चाही? आकि शायद नीचाँसँ बहैत आबि जाइ? एतेक संभावना, मुदा प्रत्येक दिशा आ प्रत्येक भिन्नता के लेल अलग-अलग कीफ्रेम बनेबाक बजाय, हम एकटा लचीला टोकन बना सकैत छी जे सब परिदृश्य के अनुकूल होयत: /* * स्लाइड इन - दिशात्मक स्लाइड एनीमेशन * दिशा नियंत्रित करबाक लेल --kf-slide-from क उपयोग करू * डिफ़ॉल्ट: बामा (-100%) स स्लाइड इन * उपयोग: 1। * एनीमेशन: kf-स्लाइड-इन 0.3s आसान-बाहर; * --kf-स्लाइड-से: -100px 0; // बाईं ओर से स्लाइड * --kf-स्लाइड-से: 100px 0; // दाहिने से स्लाइड * --kf-स्लाइड-से: 0 -50px; // ऊपर से स्लाइड */
@ keyframes kf-स्लाइड-इन { 1। से { अनुवाद: var (--kf-स्लाइड-से, -100% 0); } . के { अनुवाद करब: 0 0; } . } .
आब हम एहि एकल @keyframes टोकन कए कोनो स्लाइड दिशा क लेल उपयोग कए सकैत छी बस --kf-slide-from कस्टम प्रॉपर्टी बदलि कए: .साइडबार { . एनीमेशन: kf-स्लाइड-इन 0.3s आसान-बाहर; /* पूर्वनिर्धारित मान क उपयोग करैत अछि: बामसँ स्लाइड */ } .
.सूचना { . एनीमेशन: kf-slide-in 0.4s आसान-बाहर; --kf-स्लाइड-से: 0 -50px; /* ऊपर से स्लाइड */ } .
.मोडल { . एनीमेशन: 1। kf-फीका-में 0.5s, 2019। केएफ-स्लाइड-में 0.5s घन-बेज़ियर (0.34, 1.56, 0.64, 1); --kf-स्लाइड-से: 50px 50px; /* नीचाँ-दाहिना सँ स्लाइड */ } .
ई दृष्टिकोण हमरा सब क॑ स्थिरता क॑ बरकरार रखै के साथ-साथ अविश्वसनीय लचीलापन दै छै । एकटा कीफ्रेम घोषणा, अनंत संभावना। देखू पेन कीफ्रेम टोकन - डेमो 3 [कांटा] अमित शीन द्वारा। आरू अगर हम अपनऽ एनीमेशन क॑ आरू लचीला बनाबै ल॑ चाहै छियै, जेकरा स॑ “स्लाइड-आउट” इफेक्ट भी होय सकै छै, त॑ हम्मं॑ करी सकै छियैबस एकटा --kf-slide-to कस्टम गुण जोड़ू, जेना कि हम अगिला खंड मे देखब. द्विदिशा ज़ूम कीफ्रेम एकटा आरू आम एनीमेशन जे प्रोजेक्ट भर म॑ डुप्लिकेट होय जाय छै, वू छै “ज़ूम” इफेक्ट । चाहे टोस्ट संदेश के लेल सूक्ष्म स्केल-अप हो, मोडल के लेल नाटकीय ज़ूम-इन हो, या हेडिंग के लेल कोमल स्केल-डाउन प्रभाव हो, ज़ूम एनीमेशन सब ठाम अछि. प्रत्येक स्केल मान के लेल अलग-अलग कीफ्रेम बनेबाक बजाय, kf-zoom कीफ्रेम के एकटा लचीला सेट बनाबी:
/* * ज़ूम - पैमाने पर एनीमेशन * पैमाना मान कए नियंत्रित करबा लेल --kf-zoom-from आओर --kf-zoom-to क उपयोग करू * डिफ़ॉल्ट: 80% सँ 100% (0.8 सँ 1) धरि ज़ूम करैत अछि * उपयोग: 1। * एनीमेशन: kf-zoom 0.2s आसान-बाहर; * --kf-ज़ूम-से: 0.5; --kf-ज़ूम-टू: 1; // 50% से 100% तक ज़ूम करें * --kf-ज़ूम-से: 1; --kf-ज़ूम-टू: 0; // ज़ूम 100% से 0% तक * --kf-ज़ूम-से: 1; --kf-ज़ूम-टू: 1.1; // ज़ूम 100% से 110% तक */
@ कीफ्रेम्स kf-ज़ूम { से { पैमाने: var (--kf-ज़ूम-से, 0.8); } . के { पैमाने: var (--kf-ज़ूम-के लिए, 1); } . } .
एकटा परिभाषा के साथ, हम कोनो भी ज़ूम भिन्नता प्राप्त क सकैत छी जे हमरा सब के चाही: .टोस्ट { . एनीमेशन: 1। kf-स्लाइड-इन 0.2s, 2019। kf-zoom 0.4s आसान-आउट; --kf-slide-from: 0 100%; /* ऊपर से स्लाइड */ /* डिफ़ॉल्ट ज़ूम क उपयोग करैत अछि: 80% स 100% तक पैमाना */ } .
.मोडल { . एनीमेशन: kf-जूम 0.3s घन-बेज़ियर (0.34, 1.56, 0.64, 1); --kf-ज़ूम-से: 0; /* नाटकीय जूम 0% से 100% तक */ } .
.शीर्षक { एनीमेशन: 1। kf-फीका-में २s, २. kf-zoom 2s आसान-में; --kf-ज़ूम-से: 1.2; --kf-ज़ूम-टू: 0.8; /* कोमल स्केल डाउन */ } .
0.8 (80%) कें डिफ़ॉल्ट अधिकांश यूआई तत्वक कें लेल एकदम सही काज करएयत छै, जेना टोस्ट संदेश आ कार्ड, जखन कि विशेष मामलाक कें लेल अनुकूलित करनाय आसान छै. देखू पेन कीफ्रेम टोकन - डेमो 4 [कांटा] अमित शीन द्वारा। हाल के उदाहरण में अहां के किछ रोचक बात देखय लेल मिलत: हम एनीमेशन के संयोजन करैत रहलहुं अछि. @keyframes टोकन के साथ काम करय के एकटा प्रमुख फायदा ई छै कि एकरा एक दोसरा के साथ निर्बाध रूप स॑ एकीकृत करै लेली डिजाइन करलऽ गेलऽ छै । ई चिकना रचना आकस्मिक नहि, इरादापूर्वक होइत अछि । हम एनीमेशन रचना पर बाद मे बेसी विस्तार सं चर्चा करब, जाहि मे ईहो शामिल अछि जे ई कतय समस्याग्रस्त भ’ सकैत अछि, मुदा बेसी संयोजन सोझ आ लागू करबा मे आसान अछि. नोट : ई लेख लिखैत काल, आ शायद एकरा लिखबाक कारणे, हम अपना केँ प्रवेश एनीमेशनक पूरा विचार पर पुनर्विचार करैत पाबि गेलहुँ। सीएसएस मे हाल मे भेल सभ प्रगति के संग की हमरा सभ के एखनो एकर बिल्कुल जरूरत अछि? गनीमत रहल जे एडम आर्गाइल सेहो ओही सवाल के खोज केलनि आ अपन ब्लॉग मे शानदार ढंग सं व्यक्त केलनि. ई एतय लिखल गेल बातक विरोध नहिं करैत अछि, मुदा ई एकटा विचारणीय दृष्टिकोण प्रस्तुत करैत अछि, खास क’ जँ अहाँक प्रोजेक्ट प्रवेश एनीमेशन पर बेसी निर्भर अछि. निरंतर एनीमेशन जखन कि प्रवेश एनीमेशन, जेना “फीड”, “स्लाइड”, आ “जूम” एक बेर आ फेर रुकि जाइत अछि, निरंतर एनीमेशन अनिश्चित काल धरि लूप करैत अछि जे ध्यान आकर्षित करैत अछि वा चलैत गतिविधि केँ संकेत करैत अछि | हमरा जे दूटा सबस आम निरंतर एनीमेशन भेटैत अछि ओ अछि “स्पिन” (लोडिंग इंडिकेटर लेल) आ “पल्स” (महत्वपूर्ण तत्व कए हाइलाइट करबा लेल) । ई एनीमेशन जब॑ कीफ्रेम टोकन बनाबै के बात आबै छै त॑ अद्वितीय चुनौती पेश करै छै । प्रवेश एनीमेशन के विपरीत जे आम तौर पर एक राज्य स॑ दोसरऽ राज्य म॑ जाय छै, लगातार एनीमेशन क॑ अपनऽ व्यवहार पैटर्न म॑ अत्यधिक अनुकूलन योग्य होय के जरूरत छै । द स्पिन डॉक्टर हर प्रोजेक्ट मे कईटा स्पिन एनीमेशन क उपयोग कैल गेल बुझाइत अछि। किछु घड़ीक दिशा मे घुमैत अछि, किछु घड़ीक दिशाक विपरीत दिशा मे। कियो एकटा 360 डिग्री के घुमाव करैत छथि, कियो तेजी सं प्रभाव के लेल कई बेर घुमैत छथि. प्रत्येक भिन्नता के लेल अलग-अलग कीफ्रेम बनेबाक बजाय, एकटा लचीला स्पिन बनाबी जे सब परिदृश्य के संभालैत अछि:
/* * स्पिन - घुमाव एनीमेशन * घुमाव सीमा कए नियंत्रित करबा लेल --kf-spin-from आओर --kf-spin-to क उपयोग करू * घुमाव राशि नियंत्रित करबाक लेल --kf-spin-turns क उपयोग करू * डिफ़ॉल्ट: 0deg स 360deg (1 पूर्ण घुमाव) तक घुमैत अछि * उपयोग: 1। * एनीमेशन: kf-स्पिन 1s रैखिक अनंत; * --kf-स्पिन-मोड़: 2; // 2 पूर्ण घुमाव * --kf-स्पिन-से: 0deg; --kf-स्पिन-टू: 180deg; // आधा घुमाव * --kf-स्पिन-से: 0deg; --kf-स्पिन-से: -360deg; // घड़ी के दिशा के विपरीत */
@ कीफ्रेम केएफ-स्पिन { से { घुमाओ: var (--kf-स्पिन-से, 0deg); } . के { घुमाओ: calc (var (--kf-स्पिन-से, 0deg) + var (--kf-स्पिन-से, 360deg) * var (--kf-स्पिन-मोड़, 1)); } . } .
आब हम कोनो स्पिन भिन्नता बना सकैत छी जे हमरा सभ के नीक लागय:
.लोडिंग-स्पिनर { 1। एनीमेशन: kf-स्पिन 1s रैखिक अनंत; /* डिफ़ॉल्ट क उपयोग करैत अछि: 0deg स 360deg तक घुमैत अछि */ } .
.तेज-लोडर { एनीमेशन: kf-spin 1.2s आसान-में-बाहर अनंत वैकल्पिक; --kf-स्पिन-मोड़: 3; /* प्रति चक्र प्रत्येक दिशा के लिये 3 पूर्ण घुमाव*/ } .
.कदम-उल्टा { . एनीमेशन: kf-स्पिन 1.5s कदम (8) अनंत; --kf-स्पिन-से: -360deg; /* घड़ी के दिशा के विपरीत */ } .
.सूक्ष्म-विगल { एनीमेशन: kf-spin 2s आसान-में-बाहर अनंत वैकल्पिक; --kf-स्पिन-से: -16deg; --kf-स्पिन-टू: 32deg; /* wiggle 36 deg: -18deg और +18deg के बीच */ } .
देखू पेन कीफ्रेम टोकन - डेमो 5 [कांटा] अमित शीन द्वारा। ई दृष्टिकोण केरऽ सुंदरता ई छै कि वही कीफ्रेम स्पिनर, घुमावदार आइकन, विगल इफेक्ट, आरू यहां तक कि जटिल मल्टी-टर्न एनीमेशन क॑ लोड करै लेली काम करै छै । नाड़ी विरोधाभास पल्स एनीमेशन बेसी पेचीदा होइत अछि कारण ई अलग-अलग गुण केँ “पल्स” क’ सकैत अछि । कियो स्केल के स्पंदन करैत अछि, कियो अपारदर्शिता के स्पंद करैत अछि, आ किछु रंग के गुण जेना चमक या संतृप्ति के स्पंदन करैत अछि । प्रत्येक प्रॉपर्टी के लेल अलग-अलग कीफ्रेम बनेबाक बजाय, हम कीफ्रेम बना सकैत छी जे कोनो CSS प्रॉपर्टी के संग काज करैत अछि | स्केल आरू अपारदर्शिता विकल्प के साथ पल्स कीफ्रेम के उदाहरण यहाँ देलऽ गेलऽ छै:
/* * नाड़ी - स्पंदन एनीमेशन * पैमाना सीमा कए नियंत्रित करबा लेल --kf-pulse-scale-from आओर --kf-pulse-scale-to क उपयोग करू * अपारदर्शिता सीमा कए नियंत्रित करबा लेल --kf-pulse-opacity-from आओर --kf-pulse-opacity-to क उपयोग करू * डिफ़ॉल्ट: कोनो पल्स नहि (सब मान 1) * उपयोग: 1। * एनीमेशन: kf-पल्स 2s आसान-में-बाहर अनंत वैकल्पिक; * --kf-पल्स-स्केल-से: 0.95; --kf-पल्स-स्केल-टू: 1.05; // पैमाने पर नाड़ी * --kf-पल्स-अस्पष्टता-से: 0.7; --kf-नाड़ी-अस्पष्टता-के लिए: 1; // अस्पष्टता नाड़ी */
@ कीफ्रेम केएफ-पल्स { से { पैमाने: var (--kf-नाड़ी-पैमाने-से, 1); अस्पष्टता: var (--kf-नाड़ी-अस्पष्टता-से, 1); } . के { पैमाने: var (--kf-नाड़ी-पैमाने-के लिए, 1); अस्पष्टता: var (--kf-पल्स-अस्पष्टता-के लिए, 1); } . } .
एहि सँ एकटा लचीला पल्स बनैत अछि जे अनेक गुण केँ एनिमेट क' सकैत अछि: .कॉल-टू-एक्शन { एनीमेशन: kf-पल्स 0.6s अनंत वैकल्पिक; --kf-पल्स-अस्पष्टता-से: 0.5; /* अपारदर्शिता नाड़ी */ } .
.सूचना-बिन्दु { एनीमेशन: kf-पल्स 0.6s आसान-में-बाहर अनंत वैकल्पिक; --kf-पल्स-स्केल-से: 0.9; --kf-पल्स-स्केल-टू: 1.1; /* पैमाने पर नाड़ी */ } .
.पाठ-हाइलाइट { एनीमेशन: kf-पल्स 1.5s आसान-बाहर अनंत; --kf-पल्स-स्केल-से: 0.8; --kf-पल्स-अस्पष्टता-से: 0.2; /* पैमाने और अपारदर्शिता नाड़ी */ } .
देखू पेन कीफ्रेम टोकन - डेमो 6 [कांटा] अमित शीन द्वारा। ई एकल kf-पल्स कीफ्रेम सूक्ष्म ध्यान आकर्षित करै स॑ ल॑ क॑ नाटकीय हाइलाइट तक क॑ संभाली सकै छै, ई सब के साथ-साथ अनुकूलित करना आसान छै । उन्नत सहजता कीफ्रेम टोकन के उपयोग करय के एकटा बढ़िया बात ई छै कि हमरऽ एनीमेशन लाइब्रेरी क॑ विस्तारित करना आरू ऐन्हऽ प्रभाव प्रदान करना कतेक आसान छै जेकरा अधिकांश डेवलपर नयऽ स॑ लिखै के कष्ट नै करतै, जेना कि इलास्टिक या बाउंस । यहाँ एक सरल “बाउंस” कीफ्रेम टोकन के उदाहरण देलऽ गेलऽ छै जे कूद के ऊंचाई क॑ नियंत्रित करै लेली --kf-bounce-from कस्टम गुण के उपयोग करै छै । /* * उछाल - उछलैत प्रवेश एनीमेशन * कूद के ऊंचाई नियंत्रित करय लेल --kf-bounce-from के प्रयोग करू * डिफ़ॉल्ट: 100vh (स्क्रीन बंद) स कूदैत अछि * उपयोग: 1। * एनीमेशन: kf-उछाल 3s आसान-में; * --kf-बाउंस-से: 200px; // 200px ऊंचाई से कूद */
@ कीफ्रेम केएफ-उछाल { 0% { अनुवाद: 0 calc (var (--kf-उछाल-से, 100vh) * -1); } .
३४% { १. अनुवाद: 0 calc (var (--kf-उछाल-से, 100vh) * -0.4); } .
५५% { १. अनुवाद: 0 calc (var (--kf-उछाल-से, 100vh) * -0.2); } .
७२% { २. अनुवाद: 0 calc (var (--kf-उछाल-से, 100vh) * -0.1); } .
८५% { २. अनुवाद: 0 calc (var (--kf-उछाल-से, 100vh) * -0.05); } .
९४% { २. अनुवाद: 0 calc (var (--kf-उछाल-से, 100vh) * -0.025); } .
९९% { १. अनुवाद: 0 calc (var (--kf-उछाल-से, 100vh) * -0.0125); } .
२२%, ४५%, ६४%, ७९%, ९०%, ९७%, १००% { अनुवाद करब: 0 0; एनीमेशन-समय-कार्य: आसान-बाहर; } . } .
“इलास्टिक” जैसनऽ एनीमेशन कीफ्रेम के भीतर के गणना के कारण कनी कठिन होय छै । हमरा सब क॑ --kf-elastic-from-X आरू --kf-elastic-from-Y क॑ अलग-अलग परिभाषित करै के जरूरत छै (दुनू वैकल्पिक छै), आरू ई सब मिल क॑ स्क्रीन प॑ कोनो भी बिन्दु स॑ लोचदार प्रवेश बनाबै दै छै ।
/* * लोचदार में - लोचदार प्रवेश एनीमेशन * प्रारंभ स्थिति क नियंत्रित करबाक लेल --kf-elastic-from-X आओर --kf-elastic-from-Y क उपयोग करू * डिफ़ॉल्ट: शीर्ष केंद्र (0, -100vh) स प्रवेश करैत अछि * उपयोग: 1। * एनीमेशन: kf-लोचदार-में 2s आसान-में-बाहर दोनों; * --kf-लोचदार-से-एक्स: -50px; * --kf-लोचदार-से-वाई: -200px; // (-50px, -200px) से प्रविष्ट करें */
@ keyframes kf-लोचदार-में { 0% { अनुवाद: calc (var (--kf-लोचदार-से-एक्स, -50vw) * 1) calc (var (--kf-लोचदार-से-वाई, 0px) * 1); } .
१६% { १. अनुवाद करें: calc (var (--kf-लोचदार-से-एक्स, -50vw) * -0.3227) calc (var (--kf-लोचदार-से-वाई, 0px) * -0.3227); } .
२८% { १. अनुवाद: calc (var (--kf-लोचदार-से-एक्स, -50vw) * 0.1312)calc (var (--kf-लोचदार-से-वाई, 0px) * 0.1312); } .
४४% { १. अनुवाद: calc (var (--kf-लोचदार-से-एक्स, -50vw) * -0.0463) calc (var (--kf-लोचदार-से-वाई, 0px) * -0.0463); } .
५९% { १. अनुवाद: calc (var (--kf-लोचदार-से-एक्स, -50vw) * 0.0164) calc (var (--kf-लोचदार-से-वाई, 0px) * 0.0164); } .
७३% { २. अनुवाद: calc (var (--kf-लोचदार-से-एक्स, -50vw) * -0.0058) calc (var (--kf-लोचदार-से-वाई, 0px) * -0.0058); } .
८८% { २. अनुवाद: calc (var (--kf-लोच-से-एक्स, -50vw) * 0.0020) calc (var (--kf-लोच-से-वाई, 0px) * 0.0020); } .
१००% { १. अनुवाद करब: 0 0; } . } .
ई तरीका हमरऽ पूरा प्रोजेक्ट म॑ एडवांस कीफ्रेम केरऽ पुन: उपयोग आरू अनुकूलित करना आसान बनाबै छै, बस एकल कस्टम प्रॉपर्टी बदलला स॑ ।
.उछाल-और-ज़ूम { एनीमेशन: 1। kf-bounce 3s आसान-में, 2019। kf-zoom 3s रैखिक; --kf-ज़ूम-से: 0; } .
.उछल-आ-स्लाइड { एनीमेशन-रचना: जोड़ू; /* दुनू एनीमेशन अनुवादक उपयोग करैत अछि */ एनीमेशन: 1। kf-bounce 3s आसान-में, 2019। kf-slide-in 3s आसान-बाहर; --kf-स्लाइड-से: -200px; } .
.लोचदार-में { एनीमेशन: kf-लोचदार-में 2s आसानी-में-बाहर दुनू; } .
देखू पेन कीफ्रेम टोकन - डेमो 7 [कांटा] अमित शीन द्वारा। एखन धरि हम देखलहुं जे कोना हम कीफ्रेम कें स्मार्ट आ कुशल तरीका सं समेकित क’ सकैत छी. ओना त’ अहां अपन प्रोजेक्ट के जरूरत के हिसाब सं चीज के ट्वीक करय चाहब, मुदा हम कईटा आम एनीमेशन आओर रोजमर्रा के उपयोग केस के उदाहरण के कवर केने छी. आरू ई कीफ्रेम टोकन क॑ जगह प॑ रखला के साथ, हमरा पास अब॑ पूरा प्रोजेक्ट म॑ सुसंगत, रखरखाव योग्य एनीमेशन बनाबै लेली शक्तिशाली बिल्डिंग ब्लॉक छै । आब डुप्लिकेट कीफ्रेम नहि, आब ग्लोबल स्कोप टकराव नहि। बस हमर सबहक एनीमेशन के जरूरत के संभालबाक एकटा साफ, सुविधाजनक तरीका। मुदा असली सवाल अछि जे एहि बिल्डिंग ब्लॉक कए एक संग कोना रचब? एकरा सब के एक संग राखब हम देखलौं जे बेसिक कीफ्रेम टोकन के संयोजन सरल अछि. हमरा सब के कोनो खास चीज के जरूरत नहिं अछि सिवाय पहिल एनीमेशन के परिभाषित करय के, दोसर के परिभाषित करय के, जरूरत के हिसाब सं चर सेट करय के, आ बस. /* में फीका + स्लाइड में */ .टोस्ट { . एनीमेशन: 1। kf-फीका-में 0.4s, 2019। केएफ-स्लाइड-में 0.4s घन-बेज़ियर (0.34, 1.56, 0.64, 1); --kf-स्लाइड-से: 0 40px; } .
/* ज़ूम इन + फीका में */ .मोडल { . एनीमेशन: 1। kf-फीका-में 0.3s, 2019। kf-जूम 0.3s घन-बेज़ियर (0.34, 1.56, 0.64, 1); --kf-ज़ूम-से: 0.7; --kf-ज़ूम-टू: 1; } .
/* + पल्स में स्लाइड करू */ .सूचना { . एनीमेशन: 1। kf-स्लाइड-इन 0.5s, 2019। kf-पल्स 1.2s आसान-में-बाहर अनंत वैकल्पिक; --kf-स्लाइड-से: -100px 0; --kf-पल्स-स्केल-से: 0.95; --kf-पल्स-स्केल-टू: 1.05; } .
ई संयोजन खूबसूरती स॑ काम करै छै, कैन्हेंकि हर एनीमेशन एगो अलग गुण क॑ लक्षित करै छै: अपारदर्शिता, रूपांतरण (अनुवाद/स्केल), आदि लेकिन कखनी-कखनी टकराव भी होय छै, आरू हमरा सब क॑ ई जानना जरूरी छै कि ओकरा स॑ निपटै के कारण आरू कोना करलऽ जाय । जखन दू एनीमेशन एकहि गुण कें एनिमेट करय कें कोशिश करय छै — उदाहरण कें लेल, दूनू एनिमेट स्केल या दूनू एनिमेट अपारदर्शिता — तखन परिणाम ओ नहि होयत जे अहां अपेक्षा करय छी. डिफ़ॉल्ट रूप सं, एनीमेशन मे सं केवल एकटा एनीमेशन वास्तव मे ओहि गुण पर लागू होइत अछि, जे एनीमेशन सूची मे अंतिम अछि. ई एकटा सीमा छै कि सीएसएस एकहि गुण पर कईटा एनीमेशन कें कोना संभालैत छै. जेना कि ई इरादा के अनुसार काज नै करत किएक त' केवल kf-pulse एनीमेशन लागू होयत. .खराब-कम्बो { एनीमेशन: 1। kf-zoom 0.5s आगू, kf-नाड़ी 1.2s अनंत वैकल्पिक; --kf-ज़ूम-से: 0.5; --kf-ज़ूम-टू: 1.2; --kf-पल्स-स्केल-से: 0.8; --kf-पल्स-स्केल-टू: 1.1; } .
एनीमेशन जोड़ एक ही गुण क॑ प्रभावित करै वाला कई एनीमेशन क॑ संभाल॑ के सबसें सरल आरू सबसें सीधा तरीका छै एनीमेशन-रचना गुण के उपयोग करलऽ जाय । ऊपर देल गेल अंतिम उदाहरण मे kf-pulse एनीमेशन kf-zoom एनीमेशन के जगह लैत अछि, ताहि लेल हमरा सब के प्रारंभिक जूम नै देखाय पड़त आ 1.2 के अपेक्षित स्केल to नै भेटत। एनीमेशन-कम्पोजिशन क॑ जोड़ै लेली सेट करी क॑ हम्मं॑ ब्राउज़र क॑ कहै छियै कि दोनों एनीमेशन क॑ मिलाबै । एहि स हमरा सब कए ओ परिणाम भेटैत अछि जे हम चाहैत छी। .घटक-दो { एनीमेशन-रचना: जोड़ू; } .
देखू पेन कीफ्रेम टोकन - डेमो 8 [कांटा] अमित शीन द्वारा। ई तरीका अधिकांश मामला के लेल नीक काज करैत अछि जतय हम एकहि संपत्ति पर प्रभाव के संयोजन करय चाहैत छी. ई तखन सेहो उपयोगी होइत अछि जखन हमरा सभकेँ एनीमेशनकेँ स्टेटिक प्रॉपर्टी वैल्यूसँ जोड़बाक आवश्यकता होइत अछि । उदाहरण के लेल, अगर हमरा सब के पास कोनो तत्व छै जे translate प्रॉपर्टी के उपयोग करी क॑ ओकरा ठीक वहीं पोजीशन दै छै, आरू ओकरा बाद हम्मं॑ ओकरा kf-slide-in कीफ्रेम के साथ एनिमेट करना चाहै छियै, त॑ हमरा बिना एनीमेशन-कम्पोजिशन के गंदा दृश्यमान कूद मिलै छै । देखू पेन कीफ्रेम टोकन - डेमो 9 [कांटा] अमित शीन द्वारा। एनीमेशन-रचना जोड़ै लेली सेट करला के साथ, एनीमेशन क॑ मौजूदा के साथ सुचारू रूप स॑ जोड़लऽ जाय छैरूपांतरित होइत अछि, तेँ तत्व अपन स्थान पर रहैत अछि आ अपेक्षित रूपेँ जीवंत होइत अछि | एनीमेशन डगमगाहट अनेक एनीमेशन क॑ संभालऽ के एगो आरू तरीका छै कि ओकरा “डगमगाय” करलऽ जाय — यानी कि पहिलऽ एनीमेशन केरऽ समाप्त होय के कुछ बाद दोसरऽ एनीमेशन शुरू करलऽ जाय । ई कोनो समाधान नै छै जे हर मामला के लेलऽ काम करै छै, लेकिन ई तखन॑ उपयोगी होय छै जब॑ हमरा पास प्रवेश एनीमेशन होय छै आरू ओकरऽ बाद लगातार एनीमेशन होय छै । /* फीका हो जाय + अपारदर्शिता नाड़ी */ .सूचना { . एनीमेशन: 1। kf-fede-in 2s सहज-बाहर, 1999। kf-पल्स 0.5s 2s आसानी-में-बाहर अनंत वैकल्पिक; --kf-पल्स-अस्पष्टता-के लिए: 0.5; } .
देखू पेन कीफ्रेम टोकन - डेमो 10 [कांटा] अमित शीन द्वारा। आदेश के बात हम जे एनीमेशन के साथ काम करै छियै ओकरऽ एगो बड़ऽ हिस्सा ट्रांसफॉर्म प्रॉपर्टी के उपयोग करै छै । बेसी मामला मे ई बस बेसी सुविधाजनक अछि. एकरऽ प्रदर्शन केरऽ फायदा भी छै, कैन्हेंकि ट्रांसफॉर्म एनीमेशन क॑ जीपीयू-एक्सेलरेटेड करलऽ जाब॑ सकै छै । लेकिन अगर हम परिवर्तन के प्रयोग करबै त हमरा सब के ई स्वीकार करै के जरूरत छै कि हम सब अपन परिवर्तन के कोन क्रम में करय छी। ढेर बेसी। एखन धरि अपन कीफ्रेम मे हम व्यक्तिगत ट्रांसफॉर्म के प्रयोग केने छी. स्पेसिफिकेशन के अनुसार, ई सब हमेशा एक निश्चित क्रम में लागू करलऽ जाय छै: पहले, तत्व के अनुवाद मिलै छै, फेरू घुमाबै, फेर स्केल. ई बात समझ में अबैत अछि आ हम सब में स बेसी गोटे के उम्मीद अछि। लेकिन अगर हम ट्रांसफॉर्म प्रॉपर्टी के प्रयोग करय छी त फंक्शन के जे क्रम में लिखल गेल अछि ओ ओहि क्रम के अछि जाहि में ओकरा लागू कयल गेल अछि | एहि स्थिति मे जँ हम सभ कोनो चीज केँ एक्स-अक्ष पर 100 पिक्सेल घुमाबी आ फेर ओकरा 45 डिग्री घुमाबी तँ ओ पहिने 45 डिग्री घुमाब आ फेर ओकरा 100 पिक्सेल घुमाब से एक समान नहि अछि । /* गुलाबी वर्ग: पहिने अनुवाद करू, फेर घुमाउ */ .उदाहरण-एक { रूपांतरण: translateX (100px) घुमाओ (45deg); } .
/* हरियर वर्ग: पहिने घुमाउ, फेर अनुवाद करू */ .उदाहरण-दो { रूपांतरण: घुमाओ (45deg) translateX (100px); } .
देखू पेन कीफ्रेम टोकन - डेमो 11 [फोर्कड] अमित शीन द्वारा। लेकिन ट्रांसफॉर्म ऑर्डर के अनुसार, सब व्यक्तिगत ट्रांसफॉर्म — जे किछ हम कीफ्रेम टोकन के लेल उपयोग केने छी — ट्रांसफॉर्म फंक्शन सं पहिने होइत अछि. मतलब जे किछु अहाँ ट्रांसफॉर्म प्रॉपर्टी मे सेट करब ओ एनीमेशन के बाद होयत. लेकिन अगर आप सेट करबै, उदाहरण के लेल, kf-spin कीफ्रेम के साथ मिल क॑ अनुवाद करबै, त॑ अनुवाद एनीमेशन स॑ पहल॑ होय जैतै । एखन धरि भ्रमित छी?! एकरा स॑ ऐन्हऽ स्थिति पैदा होय जाय छै जहाँ स्थिर मान एक ही एनीमेशन लेली अलग-अलग परिणाम पैदा करी सकै छै, जेना कि निम्नलिखित मामला म॑:
/* दुनू स्पिनर के लेल आम एनीमेशन */ .स्पिनर { . एनीमेशन: kf-स्पिन 1s रैखिक अनंत; } .
/* गुलाबी स्पिनर: घुमाने से पहले अनुवाद करें (व्यक्तिगत रूपांतरण) */ .स्पिनर-गुलाबी { अनुवाद करू : 100% 50%; } .
/* ग्रीन स्पिनर: घुमाउ तखन अनुवाद करू (फंक्शन क्रम) */ .स्पिनर-हरियर { रूपांतरण: अनुवाद (100%, 50%); } .
देखू पेन कीफ्रेम टोकन - डेमो 12 [कांटा कएल गेल] अमित शीन द्वारा। अहाँ देख सकैत छी जे पहिल स्पिनर (गुलाबी) के एकटा ट्रांसलेट भेटैत अछि जे kf-स्पिन के घुमाबय सं पहिने होइत अछि, तें पहिने अपन जगह पर चलि जाइत अछि आ फेर घुमैत अछि. दोसर स्पिनर (हरे रंग) क॑ एक translate() फंक्शन मिलै छै जे व्यक्तिगत रूपांतरण के बाद होय छै, ई लेली तत्व सबसें पहल॑ घूमै छै, फेरू अपनऽ वर्तमान कोण के सापेक्ष चलै छै, आरू हमरा वू चौड़ा कक्षा प्रभाव मिलै छै । नै, ई कोनो बग नहि अछि। ई बस वू चीजऽ म॑ स॑ एगो छै जेकरा स॑ हमरा CSS के बारे म॑ जानना जरूरी छै आरू कईएक एनीमेशन या कईएक ट्रांसफॉर्म के साथ काम करतें समय ध्यान म॑ रखना जरूरी छै । जरूरत पड़ला पर, अहां kf-spin-alt कीफ्रेम कें एकटा अतिरिक्त सेट सेहो बना सकय छी जे rotate() फंक्शन कें उपयोग करयत तत्वक कें घुमा सकय छै. गति कम भ गेल आ जखन कि हम वैकल्पिक कीफ्रेम के बात क’ रहल छी, हम “नो एनीमेशन” विकल्प के नजरअंदाज नहि क’ सकैत छी. कीफ्रेम टोकन केरऽ उपयोग केरऽ एगो बड़ऽ फायदा ई छै कि सुलभता क॑ बेक करलऽ जाब॑ सकै छै, आरू वास्तव म॑ ई करना काफी आसान छै । सुलभता क॑ ध्यान म॑ रखतें हुअ॑ अपनऽ कीफ्रेम क॑ डिजाइन करी क॑ हम्मं॑ ई सुनिश्चित करी सकै छियै कि जे उपयोगकर्ता कम गति पसंद करै छै ओकरा एक सुचारू, कम विचलित करै वाला अनुभव मिल॑ सक॑, बिना अतिरिक्त काम या कोड डुप्लिकेशन के । “रिड्यूस्ड मोशन” केरऽ सटीक अर्थ एक एनीमेशन स॑ दोसरऽ एनीमेशन म॑, आरू प्रोजेक्ट स॑ प्रोजेक्ट म॑ कनी बदली सकै छै, लेकिन यहाँ कुछ महत्वपूर्ण बात ध्यान म॑ रखै के छै: कीफ्रेम म्यूट करब जहाँ कुछ एनीमेशन क॑ नरम या धीमा करलऽ जाय सकै छै, वहीं कुछ ऐसनऽ छै जेकरा कम गति के आग्रह करला प॑ पूरा तरह स॑ गायब होय जाना चाहियऽ । पल्स एनीमेशन एकर नीक उदाहरण अछि। ई सुनिश्चित करै लेली कि ई एनीमेशन रिड्यूस्ड मोशन मोड म॑ नै चलै छै, हम्मं॑ बस एकरा उचित मीडिया क्वेरी म॑ लपेटी सकै छियै ।
@media (पसंद-कम-गति: कोनो-पसंदीदा) { @ keyfrmaes kf-नाड़ी { से { पैमाने: var (--kf-नाड़ी-पैमाने-से, 1); अस्पष्टता: var (--kf-नाड़ी-अस्पष्टता-से, 1); } . के { पैमाने: var (--kf-नाड़ी-पैमाने-के लिए, 1); अस्पष्टता: 1।var (--kf-नाड़ी-अस्पष्टता-के लिए, 1); } . } . } .
ई सुनिश्चित करै छै कि जे उपयोगकर्ता न॑ कम करै लेली पसंद-कम-गति सेट करल॑ छै, ओकरा एनीमेशन नै देखै ल॑ मिलतै आरू ओकरा अपनऽ पसंद स॑ मेल खाबै वाला अनुभव मिलतै । तत्काल में किछु कीफ्रेम अछि जेकरा हम सब बस हटा नहि सकैत छी, जेना प्रवेश एनीमेशन । मूल्य बदलय पड़त, जीवंत करय पड़त; अन्यथा, तत्वक सही मान नहि होयत. मुदा कम गति मे प्रारंभिक मान सँ ई संक्रमण तत्काल हेबाक चाही । एकरा प्राप्त करय लेल हम कीफ्रेम के एकटा अतिरिक्त सेट परिभाषित करब जतय मान तुरंत अंतिम अवस्था मे कूदि जायत. ई सब हमर डिफ़ॉल्ट कीफ्रेम बनि जाइत अछि। तखन, हम एकटा मीडिया क्वेरी के अंदर नियमित कीफ्रेम जोड़ब जे पसंद-कम-मोशन के लेल कोनो-पसंदीदा पर सेट कएल गेल अछि, ठीक ओहिना जेना पिछला उदाहरण मे छल. /* कम गति के लेल तुरंत पॉप इन करू */ @ कीफ्रेम्स kf-ज़ूम { से, तक { पैमाने: var (--kf-ज़ूम-के लिए, 1); } . } .
@media (पसंद-कम-गति: कोनो-पसंदीदा) { /* मूल ज़ूम कीफ्रेम */ @ कीफ्रेम्स kf-ज़ूम { से { पैमाने: var (--kf-ज़ूम-से, 0.8); } . के { पैमाने: var (--kf-ज़ूम-के लिए, 1); } . } . } .
ई तरह स॑ जे उपयोगकर्ता कम गति पसंद करै छै, वू तत्व क॑ तुरंत ओकरऽ अंतिम अवस्था म॑ दिखाय क॑ देखतै, जबकि बाकी सब क॑ एनिमेटेड संक्रमण मिलतै । द सॉफ्ट एप्रोच एहन मामला अछि जखन हम सब किछु गति जरूर राखय चाहैत छी, मुदा मूल एनीमेशन स बहुत नरम आ शांत। जेना, हम बाउंस प्रवेश द्वार के बदलि क' कोमल फेड-इन क' सकैत छी.
@ कीफ्रेम केएफ-उछाल { /* कम गति के लेल सॉफ्ट फेड-इन */ } .
@media (पसंद-कम-गति: कोनो-पसंदीदा) { @ कीफ्रेम केएफ-उछाल { /* मूल उछाल कीफ्रेम */ } . } .
आब, कम गति सक्षम उपयोगकर्ता क॑ अखनी भी रूप केरऽ भाव मिलै छै, लेकिन बिना उछाल या लोचदार एनीमेशन केरऽ तीव्र गति के । बिल्डिंग ब्लॉक के जगह पर अगिला सवाल ई अछि जे ओकरा वास्तविक कार्यप्रवाह के हिस्सा कोना बनाओल जाय. लचीला कीफ्रेम लिखनाई एक बात छै, लेकिन ओकरा पूरा बड़ऽ प्रोजेक्ट म॑ विश्वसनीय बनाबै लेली कुछ रणनीति के जरूरत होय छै जेकरा हमरा कठिन तरीका स॑ सीखना छेलै । कार्यान्वयन रणनीति एवं सर्वोत्तम प्रथाएँ एक बेर जखन हमरा सब लग कीफ्रेम टोकन क ठोस लाइब्रेरी भ गेल त असली चुनौती इ अछि जे ओकरा रोजमर्रा क काज मे कोना आनल जाए।
प्रलोभन ई छै कि एक साथ सब कीफ्रेम क॑ गिरा क॑ समस्या के समाधान घोषित करी देलऽ जाय, लेकिन व्यवहार म॑ हमरा पता चललै कि धीरे-धीरे अपनाबै स॑ सबसें अच्छा परिणाम मिलै छै । सबसँ बेसी आम एनीमेशन सँ शुरू करू, जेना फीका वा स्लाइड। ई आसान जीत छै जे तत्काल मूल्य देखाबै छै, जेकरा म॑ बड़ऽ पुनर्लेखन के जरूरत नै छै । नामकरण एकटा आओर बिन्दु अछि जे ध्यान देबय योग्य अछि. एकटा सुसंगत उपसर्ग या नामस्थान ई स्पष्ट करै छै कि कोन एनीमेशन टोकन छै आरू कोन स्थानीय एक-दू के छै. इ आकस्मिक टक्कर कें सेहो रोकय छै आ नब टीम कें सदस्यक कें एक नजर मे साझा प्रणाली कें पहचान करय मे मदद करय छै. दस्तावेजीकरण ओतबे महत्वपूर्ण अछि जतेक कोड स्वयं। प्रत्येक कीफ्रेम टोकन के ऊपर एकटा छोट टिप्पणी सेहो बाद में घंटों के अनुमान लगाबय के बचत क सकैत अछि. एकटा डेवलपर कें टोकन फाइल खोलय मे सक्षम होबाक चाही, ओकरा जरूरत कें प्रभाव कें लेल स्कैन करय मे सक्षम होबाक चाही, आ उपयोग पैटर्न कें सीधा अपन घटक मे कॉपी करय मे सक्षम होबाक चाही. लचीलापन ही छै जे ई दृष्टिकोण क॑ प्रयास के लायक बनाबै छै । समझदार कस्टम गुण क॑ उजागर करी क॑ हम्मं॑ टीमऽ क॑ सिस्टम क॑ तोड़ी क॑ बिना एनीमेशन क॑ अनुकूलित करै के गुंजाइश दै छियै । संगे-संग कोशिश करू जे बेसी जटिल नहि होए. जे घुंडी मायने रखैत अछि से उपलब्ध कराउ आ बाकी के राय राखू। अंत मे सुलभता मोन राखू। हर एनीमेशन के रिड्यूस्ड मोशन विकल्प के जरूरत नै छै, लेकिन बहुतो के जरूरत छै. ई समायोजनऽ म॑ जल्दी बेकिंग के मतलब छै कि हमरा सब क॑ बाद म॑ कहियो एकरा रिट्रोफिट नै करलऽ जाय, आरू ई एगो ऐसनऽ स्तर के देखभाल क॑ दर्शाबै छै जेकरा म॑ हमरऽ उपयोगकर्ता सिनी क॑ ध्यान देतै भले ही वू एकरऽ जिक्र कहियो नै कर॑ ।
हमरऽ अनुभव म॑ कीफ्रेम टोकन क॑ हमरऽ डिजाइन टोकन वर्कफ़्लो के हिस्सा के रूप म॑ मानना ही ओकरा चिपक॑ छै । एक बेर जखन ओ सब जगह पर आबि जाइत अछि त ओ स्पेशल इफेक्ट के तरह महसूस करब बंद क दैत अछि आ डिजाइन भाषा के हिस्सा बनि जाइत अछि, जे उत्पाद कोना चलैत अछि आ कोना प्रतिक्रिया दैत अछि एकर स्वाभाविक विस्तार अछि । लपेटब एनीमेशन इंटरफेस बनाबै के सबस॑ आनन्ददायक हिस्सा म॑ स॑ एक होय सकै छै, लेकिन बिना संरचना के ई कुंठा केरऽ सबस॑ बड़ऽ स्रोत म॑ स॑ एक भी बनी सकै छै । कीफ्रेम क॑ टोकन के रूप म॑ मानतें हुअ॑ आपने कुछ ऐसनऽ चीज लै क॑ जे आमतौर प॑ गन्दा आरू प्रबंधित करना मुश्किल होय छै आरू ओकरा एगो स्पष्ट, पूर्वानुमानित सिस्टम म॑ बदली दै छियै । असली मूल्य सिर्फ कोड के किछ लाइन के सेव करय मे नहिं अछि. ई विश्वास म॑ छै कि जब॑ आपने फेड, स्लाइड, ज़ूम या स्पिन के प्रयोग करबै त॑ आपने क॑ ठीक-ठीक पता छै कि ई पूरा प्रोजेक्ट म॑ केना व्यवहार करतै । ई लचीलापन में छै जे कस्टम संपत्ति स॑ आबै छै जेकरा म॑ अंतहीन भिन्नता के अराजकता नै छै । आ ई नींव मे बनल सुलभता मे अछि नहि कि जेना जोड़ल गेल अछिएकटा आफ्टर थॉट। हम ई विचार अलग-अलग टीम आ अलग-अलग कोडबेस मे काज करैत देखलहुं अछि, आ पैटर्न सदिखन एकहि रहैत अछि। एक बेर टोकन जगह पर आबि गेलाक बाद कीफ्रेम ट्रिक के बिखड़ल संग्रह बनब बंद भ जायत अछि आ डिजाइन भाषा के हिस्सा बनि जाइत अछि. इ उत्पाद कें बेसि इरादा सं, बेसि सुसंगत आ बेसि जीवित महसूस करायत छै. अगर अहां एहि लेख सं एकटा बात लैत छी त' ई होउ जे एनीमेशन ओहिना देखभाल आ संरचना के हकदार अछि जे हम सभ पहिने सं रंग, टाइपोग्राफी, आ स्पेसिंग के दैत छी. कीफ्रेम टोकन मे छोट निवेश हर बेर जखन अहाँक इंटरफेस चलैत अछि तखन फल दैत अछि.
