इसदी कल्पना करो: तुस इक नमें प्रोजेक्ट च शामल होंदे ओ, कोडबेस च गोता लांदे ओ, ते पैह् ले किश घैंटे दे अंदर, तुसेंगी कुसै निराशाजनक रूप कन्नै परिचित चीज दी खोज होंदी ऐ। पूरे स्टाइलशीट च बिखरे दे, तुसें गी इक गै बुनियादी एनीमेशनें आस्तै मते सारे @keyframes परिभाषाएं मिलदियां न. त्रै बक्ख-बक्ख फेड-इन इफेक्ट, दो जां त्रै स्लाइड भिन्नता, मुट्ठी भर ज़ूम एनीमेशन, ते घट्टोघट्ट दो बक्ख-बक्ख स्पिन एनीमेशन कीजे, ठीक ऐ, की नेईं? @ कीफ्रेम्स पल्स { से { पैमाने पर: 1 ऐ; } ऐ करने के लिये { पैमाने पर: 1.1 ऐ; } ऐ } ऐ
@ कीफ्रेम्स बड़ा-पल्स { 0%, 20%, 100% ऐ { पैमाने पर: 1 ऐ; } ऐ 10%, 40% ऐ { पैमाने पर: 1.2 ऐ; } ऐ } ऐ
जेकर एह् परिदृश्य परिचित लगदा ऐ तां तुस अकेले नेईं ओ। बक्ख-बक्ख प्रोजेक्टें च मेरे अनुभव च, इक सबनें थमां लगातार त्वरित जीत जेह् ड़ी मैं डिलीवर करी सकना ऐ, ओह् ऐ कीफ्रेम गी समेकित ते मानकीकरण करना। एह् इ’न्ना भरोसेमंद पैटर्न बनी गेदा ऐ जे मैं हून इस सफाई गी कुसै बी नमें कोडबेस पर अपने पैह् ले कम्में च शामल होने दे रूप च उत्सुकता कन्नै इंतजार करा’रदा ऐ। अराजकता दे पिच्छे दा तर्क इस रिडंडेंसी दा पूरा मतलब होंदा ऐ जदूं तुस इसदे बारे च सोचदे ओ। अस सारे अपने रोजमर्रा दे कम्में च इक गै बुनियादी एनीमेशन दा इस्तेमाल करदे आं: फीका, स्लाइड, ज़ूम, स्पिन, ते होर आम प्रभाव। एह् एनीमेशन काफी सीधे न, ते कम्म पूरा करने आस्तै इक त्वरित @keyframes परिभाषा गी चाबुक मारना आसान ऐ। केंद्रीकृत एनीमेशन प्रणाली दे बगैर, डेवलपर स्वाभाविक रूप कन्नै इनें कीफ्रेम गी नमें सिरेआ लिखदे न, इस गल्लै थमां अनजान जे इसी चाल्ली दे एनीमेशन कोडबेस च होर थाह् रें पर पैह् ले थमां गै मौजूद न। एह् खास करियै घटक-आधारत आर्किटेक्चर च कम्म करने पर आम ऐ (जेह् ड़ा इस दिनें च साढ़े च मते सारे करदे न), कीजे टीमें अक्सर एप्लिकेशन दे बक्ख-बक्ख हिस्सें च समानांतर रूप कन्नै कम्म करदियां न। नतीजा निकलया? एनीमेशन अराजकता। छोटी जेही समस्या कीफ्रेम डुप्लिकेशन कन्नै सबनें शा साफ मुद्दे विकास दा समां बरबाद ते गैर-जरूरी कोड ब्लोट न। कई कीफ्रेम परिभाषाएं दा मतलब ऐ जे जरूरतें च बदलाव होने पर अपडेट करने लेई मते सारे थाह् रें। अपने फीका एनीमेशन दे समें गी समायोजित करने दी लोड़ ऐ? तुसेंगी अपने कोडबेस च हर इक इंस्टेंस दा शिकार करना होग. आसान करने आह् ले फंक्शनें गी मानकीकरण करना चांह् दे ओ ? सारे भिन्नताएं गी ढूंढने च गुड लक। रखरखाव बिंदुएं दा एह् गुणा साधारण एनीमेशन अपडेट गी बी समें-सीमा करने आह् ला कम्म बनांदा ऐ। बड़ी समस्या एह् कीफ्रेम डुप्लिकेशन सतह दे थल्लै लुकाई दी इक मती कपटी समस्या पैदा करदी ऐ : वैश्विक दायरे दा जाल। घटक-आधारत आर्किटेक्चर कन्नै कम्म करदे बेल्लै बी, CSS कीफ्रेम हमेशा वैश्विक दायरे च परिभाशत कीते जंदे न। इसदा मतलब ऐ जे सारे कीफ्रेम सारे घटकें पर लागू होंदे न। म्हेशां। हां, तुंदा एनीमेशन जरूरी नेईं ऐ जे तुस अपने घटक च परिभाशत कीफ्रेम दा इस्तेमाल करदा ऐ. एह् आखरी कीफ्रेम दा उपयोग करदा ऐ जेह् ड़े ठीक उस्सै नांऽ कन्नै मेल खंदे न जेह् ड़े ग्लोबल स्कोप च लोड कीते गेदे हे. जदूं तगर तुंदे सारे कीफ्रेम इक जेह् ड़े न, एह् इक मामूली मुद्दा लग्गी सकदा ऐ। पर जिसलै तुस कुसै खास उपयोग केस आस्तै एनीमेशन गी अनुकूलित करना चांह् दे ओ, तां तुस परेशानी च होंदे ओ, जां इस थमां बी बुरा, तुस गै उ’नेंगी पैदा करने आह् ले होगेओ। या तां तुंदा एनीमेशन कम्म नेईं करग कीजे तुंदे बाद कोई होर घटक लोड होई गेदा ऐ, तुंदे कीफ्रेम गी ओवरराइट करदा ऐ, जां तुंदा घटक आखरी च लोड होंदा ऐ ते गलती कन्नै उस कीफ्रेम दे नांऽ दा इस्तेमाल करदे होई हर दूए घटक आस्तै एनीमेशन व्यवहार गी बदलदा ऐ, ते तुसेंगी इसदा एहसास बी नेईं होई सकदा ऐ. इत्थै इक साधारण उदाहरण ऐ जेह् ड़ा इस समस्या गी दर्शांदा ऐ : .घटक-एक { /* घटक शैलियाँ */ एनीमेशन: नाड़ी 1s आसान-इन-आउट अनंत वैकल्पिक; } ऐ
/* एह् @keyframes परिभाषा कम्म नेईं करग */ @ कीफ्रेम्स पल्स { से { पैमाने पर: 1 ऐ; } ऐ करने के लिये { पैमाने पर: 1.1 ऐ; } ऐ } ऐ
/* बाद च कोड च... */
.घटक-दो { /* घटक शैलियाँ */ एनीमेशन: नाड़ी 1 एस आसानी-इन-आउट अनंत; } ऐ
/* एह् कीफ्रेम दौनें घटकें पर लागू होग */ @ कीफ्रेम्स पल्स { 0%, 20%, 100% ऐ { पैमाने पर: 1 ऐ; } ऐ 10%, 40% ऐ { पैमाने पर: 1.2 ऐ; } ऐ } ऐ
दोनों घटक इक गै एनीमेशन नांऽ दा इस्तेमाल करदे न, पर दूई @keyframes परिभाषा पैह् ली गी ओवरराइट करदी ऐ. हुण घटक-एक ते घटक-दो दोनों ही दूजे कीफ्रेम दा इस्तेमाल करंगन, इस गल्ल दी परवाह नेईं कि किस घटक ने कुस कीफ्रेम गी परिभाशत कीता ऐ। पेन कीफ्रेम्स टोकन दिक्खो - अमित शीन द्वारा डेमो 1 [कांटा]। सब तों बुरा हिस्सा? एह् अक्सर लोकल विकास च पूरी चाल्ली कम्म करदा ऐ पर उत्पादन च रहस्यमय तरीके कन्नै टूटदा ऐ जिसलै बिल्ड प्रक्रियाएं तुंदी स्टाइलशीटें दे लोडिंग क्रम गी बदलदियां न. तुस एनीमेशनें कन्नै समाप्त होंदे ओ जेह् ड़े इस गल्लै पर निर्भर करदे न जे कुस घटक ते किस क्रम च लोड कीते गेदे न। समाधान: एकीकृत कीफ्रेम इस अराजकता दा जवाब हैरानी आह् ला सरल ऐ: इक साझा स्टाइलशीट च संग्रहीत पूर्व-निर्धारित गतिशील कीफ्रेम। हर घटक गी अपने एनीमेशनें गी परिभाशित करने दे बजाय, अस केंद्रीकृत कीफ्रेम बनांदे आं जेह् ड़े अच्छी तरह कन्नै दस्तावेज कीते गेदे न, जेह् ड़े करने च आसान होंदे नउपयोग, रखरखाव, ते तुंदी परियोजना दी विशिष्ट जरूरतें दे अनुरूप। इसगी कीफ्रेम टोकन दे रूप च सोचो। जि'यां अस रंगें ते स्पेसिंग आस्तै टोकन दा इस्तेमाल करदे आं , ते साढ़े च मते सारे पैह् ले थमां गै एनीमेशन गुणें आस्तै टोकन दा इस्तेमाल करदे आं , जि'यां अवधि ते आसान करने आह् ले फंक्शनें आस्तै , कीफ्रेम आस्तै बी टोकन दा इस्तेमाल की नेईं कीता जा ? एह् तरीका कुसै बी मौजूदा डिजाइन टोकन वर्कफ़्लो कन्नै स्वाभाविक रूप कन्नै इकट्ठा होई सकदा ऐ जेह् ड़ा तुस बरतदे ओ, जिसलै के इक गै बारी च निक्की समस्या (कोड डुप्लिकेशन) ते बड्डी समस्या (ग्लोबल स्कोप टकराव) दोनें गी हल करी सकदा ऐ। विचार सीधा ऐ: साढ़े सारे आम एनीमेशनें लेई सच्चाई दा इक गै स्रोत बनाओ। इस साझा स्टाइलशीट च सावधानी कन्नै तैयार कीते गेदे कीफ्रेम होंदे न जेह् ड़े एनीमेशन पैटर्न गी कवर करदे न जेह् ड़े साढ़ा प्रोजेक्ट असल च इस्तेमाल करदा ऐ। होर अंदाजा नेईं लाना जे साढ़े कोडबेस च कुतै बी फीका एनीमेशन पैह् ले थमां गै मौजूद ऐ जां नेईं। होर घटकें थमां एनीमेशनें गी गलती कन्नै ओवरराइट करना नेईं। पर इत्थै कुंजी ऐ: एह् सिर्फ स्थिर कापी-पेस्ट एनीमेशन नेईं न। एह् CSS कस्टम गुणें दे राहें गतिशील ते अनुकूलन योग्य होने आस्तै डिजाइन कीते गेदे न , जेह् ड़े असेंगी स्थिरता गी बनाए रखने दी इजाजत दिंदे न , जदके अजें बी एनीमेशनें गी विशिष्ट उपयोग मामलें च अनुकूलित करने दी लचीलापन होंदा ऐ , जि’यां जेकर तुसेंगी इक थाह् र पर थोह् ड़ा बड्डा "पल्स" एनीमेशन दी लोड़ ऐ पैह् ले कीफ्रेम्स टोकन दा निर्माण पैह् ले निम्न लटकदे फलें च इक जेह् ड़ा असेंगी निबड़ना चाहिदा ऐ ओह् ऐ "फेड-इन" एनीमेशन। अपने हाल दे प्रोजेक्टें च इक च, मिगी इक दर्जन कोला मते बक्ख-बक्ख फीके-इन परिभाषाएं मिलीयां, ते हां, उ'नें सारें ने बस 0 थमां 1 तगर अस्पष्टता गी एनिमेट कीता। तोआडी, आओ इक नमीं स्टाइलशीट बनाचै, इसगी kf-tokens.css आखचे, इसगी अपने प्रोजेक्ट च आयात करचे, ते इसदे अंदर उचित टिप्पणियें कन्नै साढ़े कीफ्रेम रक्खचै। /* कीफ्रेम-टोकन.सीएसएस */
/* * फीका इन - फीका प्रवेश एनीमेशन * उपयोग: एनीमेशन: केएफ-फीका-इन 0.3s आसान-बाहर; */ @ कीफ्रेम्स केएफ-फीका-में { से { अस्पष्टता: 0 ऐ; } ऐ करने के लिये { अस्पष्टता: 1 ऐ; } ऐ } ऐ
एह् इकल @keyframes घोशणा साढ़े कोडबेस च उनें सारे बिखरे दे फीके-इन एनीमेशनें दी जगह लैंदी ऐ. साफ, सरल, ते वैश्विक स्तर पर लागू। ते हुन जेकर साढ़े कोल एह् टोकन परिभाषित ऐ तां अस इसदा इस्तेमाल अपने पूरे प्रोजेक्ट च कुसै बी घटक थमां करी सकने आं: .मोडल { एनीमेशन: केएफ-फीका-इन 0.3s आसान-बाहर; } ऐ
.टूलटिप { एनीमेशन: केएफ-फीका-इन 0.2s आसान-इन-आउट; } ऐ
.सूचना { एनीमेशन: केएफ-फीका-इन 0.5s आसान-बाहर; } ऐ
पेन कीफ्रेम्स टोकन दिक्खो - अमित शीन द्वारा डेमो 2 [कांटा]। नोट: अस अपने सारे @keyframes नांऽ च kf- उपसर्ग दा इस्तेमाल करा’रदे आं. एह् उपसर्ग इक नेमस्पेस दे रूप च कम्म करदा ऐ जेह् ड़ा प्रोजेक्ट च मौजूदा एनीमेशनें कन्नै नामांकन टकराव गी रोकदा ऐ ते तुरत साफ करदा ऐ जे एह् कीफ्रेम साढ़ी कीफ्रेम टोकन फाइल थमां औंदे न. इक गतिशील स्लाइड बनाना kf-fede-in कीफ्रेम बड़ा शैल कम्म करदे न कीजे एह् सरल ऐ ते चीजें गी गंदगी करने दी गुंजाइश घट्ट ऐ। होर एनीमेशनें च, हालांकि, असेंगी मता गतिशील होने दी लोड़ ऐ, ते इत्थै अस CSS कस्टम गुणें दी भारी शक्ति दा फायदा लैई सकने आं। एह् ओह् थाह् र ऐ जित्थें कीफ्रेम टोकन बिखरे दे स्थिर एनीमेशनें दी तुलना च वास्तव च चमकदे न। आओ इक आम परिदृश्य लैचै: “स्लाइड-इन” एनीमेशन। पर कित्थे तों फिसल जाओ? दाईं ओर से 100px? बाईं ओर से 50% ? क्या इसगी स्क्रीन दे उप्पर थमां दाखल होना चाहिदा ऐ ? या शायद नीचे से अंदर तैर जाओ? इतनी सारी संभावनाएं, पर हर दिशा ते हर बदलाव आस्तै बक्ख-बक्ख कीफ्रेम बनाने दे बजाय, अस इक लचीला टोकन बनाई सकने आं जेह् ड़ा सारे परिदृश्यें दे अनुकूल होंदा ऐ: /* * स्लाइड इन - दिशात्मक स्लाइड एनीमेशन * दिशा गी नियंत्रित करने लेई --kf-slide-from दा इस्तेमाल करो * डिफ़ॉल्ट: बाएं (-100%) थमां अंदर स्लाइड करदा ऐ * इस्तेमाल दा: * एनीमेशन: केएफ-स्लाइड-इन 0.3s आसान-बाहर; * --kf-स्लाइड-से: -100px 0; // बाएं से स्लाइड * --kf-स्लाइड-से: 100px 0; // दाईं ओर से स्लाइड * --kf-स्लाइड-से: 0 -50px; // ऊपर से स्लाइड */
@ कीफ्रेम्स केएफ-स्लाइड-इन { से { अनुवाद करो: var (--kf-स्लाइड-से, -100% 0); } ऐ करने के लिये { अनुवाद करना: 0 0; } ऐ } ऐ
हुण अस इस इकल @keyframes टोकन दा इस्तेमाल कुसै बी स्लाइड दिशा आस्तै सिर्फ --kf-slide-from कस्टम प्रॉपर्टी गी बदलियै करी सकने आं: .साइडबार { एनीमेशन: केएफ-स्लाइड-इन 0.3s आसान-बाहर; /* डिफ़ॉल्ट मान दा उपयोग करदा ऐ: बाएं थमां स्लाइड्स */ } ऐ
.सूचना { एनीमेशन: केएफ-स्लाइड-इन 0.4s आसान-बाहर; --kf-स्लाइड-से: 0 -50px; /* ऊपर से स्लाइड */ } ऐ
.मोडल { एनीमेशन: एनीमेशन: केएफ-फीका-में 0.5s, केएफ-स्लाइड-इन 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) तगर ज़ूम करदा ऐ * इस्तेमाल दा: * एनीमेशन: केएफ-ज़ूम 0.2s आसान-आउट; * --kf-ज़ूम-से: 0.5; --केएफ-ज़ूम-टू: 1; // ज़ूम 50% ते 100% * --kf-ज़ूम-से: 1; --केएफ-ज़ूम-टू: 0; // ज़ूम 100% ते 0% * --kf-ज़ूम-से: 1; --केएफ-ज़ूम-टू: 1.1; // ज़ूम 100% ते 110% */
@ कीफ्रेम्स केएफ-ज़ूम { से { पैमाने: var (--kf-ज़ूम-से, 0.8); } ऐ करने के लिये { पैमाने: var (--kf-ज़ूम-टू, 1); } ऐ } ऐ
इक परिभाषा कन्नै, अस कुसै बी ज़ूम भिन्नता गी हासल करी सकने आं जेह् ड़ी असेंगी लोड़चदी ऐ: .टोस्ट { एनीमेशन: एनीमेशन: केएफ-स्लाइड-इन 0.2s, ऐ। केएफ-ज़ूम 0.4s आसान-आउट; --kf-स्लाइड-से: 0 100%; /* ऊपर से स्लाइड */ /* डिफ़ॉल्ट ज़ूम दा उपयोग करदा ऐ: 80% थमां 100% तगर पैमाने */ } ऐ
.मोडल { एनीमेशन: केएफ-ज़ूम 0.3s घन-बेज़ियर (0.34, 1.56, 0.64, 1); --kf-ज़ूम-से: 0; /* नाटकीय ज़ूम 0% ते 100% */ } ऐ
.शीर्षक दा { एनीमेशन: एनीमेशन: केएफ-फीका-इन 2 एस, केएफ-ज़ूम 2s आसान-इन; --केएफ-ज़ूम-से: 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-स्पिन-मोड़: 2; // 2 फुल रोटेशन * --kf-स्पिन-से: 0deg; --kf-स्पिन-टू: 180deg ऐ; // आधा घुमाव * --kf-स्पिन-से: 0deg; --kf-स्पिन-टू: -360deg; // घड़ी दी दिशा दे विपरीत */
@ कीफ्रेम्स केएफ-स्पिन { से { घुमाओ: var (--kf-स्पिन-से, 0deg); } ऐ करने के लिये { घुमाओ: calc (var (--kf-स्पिन-से, 0deg) + var (--kf-स्पिन-टू, 360deg) * var (--kf-स्पिन-मोड़, 1)); } ऐ } ऐ
हुण अस कोई बी स्पिन भिन्नता बनाई सकने आं जेह् ड़ी असेंगी पसंद ऐ:
.लोडिंग-स्पिनर { एनीमेशन: केएफ-स्पिन 1 एस रैखिक अनंत; /* डिफ़ॉल्ट दा उपयोग करदा ऐ: 0deg थमां 360deg तगर घुमदा ऐ */ } ऐ
.फास्ट-लोडर { एनीमेशन: केएफ-स्पिन 1.2s आसान-इन-आउट अनंत वैकल्पिक; --kf-स्पिन-टर्न: 3 ऐ; /* प्रति चक्र हर दिशा लेई 3 पूर्ण घुमाव*/ } ऐ
.कदम-उल्टा { एनीमेशन: केएफ-स्पिन 1.5s कदम (8) अनंत; --kf-स्पिन-टू: -360deg; /* घड़ी दी दिशा दे विपरीत */ } ऐ
.सूक्ष्म-विगल { एनीमेशन: केएफ-स्पिन 2s आसान-इन-आउट अनंत वैकल्पिक; --kf-स्पिन-से: -16deg; --kf-स्पिन-टू: 32deg ऐ; /* विगल 36 डिग्री: -18deg ते +18deg दे बीच */ } ऐ
पेन कीफ्रेम्स टोकन दिक्खो - अमित शीन द्वारा डेमो 5 [कांटा]। इस पद्धति दी खूबसूरती एह् ऐ जे स्पिनर, घूमने आह् ले आइकन, विगल इफेक्ट, ते इत्थूं तगर जे जटिल मल्टी-टर्न एनीमेशनें गी लोड करने आस्तै इक गै कीफ्रेम कम्म करदे न। दी पल्स पैराडाक्स पल्स एनीमेशन होर मुश्कल होंदे न कीजे एह् बक्ख-बक्ख गुणें गी "पल्स" करी सकदे न। कुसै पैमाने गी स्पंदन करदे न, कुसै अपारदर्शिता गी स्पंदन करदे न, ते कुसै ने चमक जां संतृप्ति जनेह् रंग गुणें गी स्पंद करदे न। हर प्रॉपर्टी आस्तै बक्ख-बक्ख कीफ्रेम बनाने दे बजाय, अस कीफ्रेम बनाई सकने आं जेह् ड़ी कुसै बी CSS प्रॉपर्टी कन्नै कम्म करदी ऐ। स्केल ते अपारदर्शिता विकल्पें कन्नै पल्स कीफ्रेम दा इक उदाहरण दित्ता गेदा ऐ:
/* * नाड़ी - स्पंदन एनीमेशन * पैमाने सीमा गी नियंत्रित करने लेई --kf-pulse-scale-from ते --kf-pulse-scale-to दा इस्तेमाल करो * अपारदर्शिता सीमा गी नियंत्रित करने आस्तै --kf-pulse-opacity-from ते --kf-pulse-opacity-to दा इस्तेमाल करो * डिफ़ॉल्ट: कोई नाड़ी (सभी मान 1) * इस्तेमाल दा: * एनीमेशन: केएफ-पल्स 2s आसान-इन-आउट अनंत वैकल्पिक; * --kf-नाड़ी-पैमाने-से: 0.95; --केएफ-पल्स-स्केल-टू: 1.05; // पैमाने दा नाड़ी * --kf-नाड़ी-अस्पष्टता-से: 0.7; --kf-नाड़ी-अस्पष्टता-के लिए: 1; // अपारदर्शिता नाड़ी */
@ कीफ्रेम्स केएफ-पल्स { से { पैमाने: var (--kf-नाड़ी-पैमाने-से, 1); अस्पष्टता: var (--kf-नाड़ी-अस्पष्टता-से, 1); } ऐ करने के लिये { पैमाने: var (--kf-नाड़ी-पैमाने-के लिए, 1); अस्पष्टता: var (--kf-नाड़ी-अस्पष्टता-के, 1); } ऐ } ऐ
इस कन्नै इक लचीली पल्स पैदा होंदी ऐ जेह् ड़ी मते सारे गुणें गी एनिमेट करी सकदी ऐ : .कॉल-टू-एक्शन { एनीमेशन: केएफ-पल्स 0.6s अनंत वैकल्पिक; --kf-नाड़ी-अस्पष्टता-से: 0.5; /* अपारदर्शिता नाड़ी */ } ऐ
.सूचना-बिंदु { एनीमेशन: केएफ-पल्स 0.6s आसान-इन-आउट अनंत वैकल्पिक; --kf-नाड़ी-पैमाने-से: 0.9; --kf-पल्स-स्केल-टू: 1.1; /* पैमाने दा नाड़ी */ } ऐ
.पाठ-हाइलाइट { एनीमेशन: केएफ-पल्स 1.5s आसान-बाहर अनंत; --kf-नाड़ी-पैमाने-से: 0.8; --kf-नाड़ी-अस्पष्टता-से: 0.2; /* पैमाने ते अपारदर्शिता नाड़ी */ } ऐ
पेन कीफ्रेम्स टोकन दिक्खो - अमित शीन द्वारा डेमो 6 [कांटा]। एह् इकल केएफ-पल्स कीफ्रेम सूक्ष्म ध्यान हड़पने थमां लेइयै नाटकीय हाइलाइटें तगर हर चीज गी संभाली सकदा ऐ, एह् सब किश अनुकूलित करने च आसान होने दे कन्नै-कन्नै। उन्नत सहजता कीफ्रेम टोकन दा इस्तेमाल करने दी इक बड्डी गल्ल एह् ऐ जे साढ़ी एनीमेशन लाइब्रेरी गी विस्तार करना ते ऐसे प्रभाव उपलब्ध करोआना किन्ना आसान ऐ जेह् ड़े मते सारे डेवलपर नमें सिरेआ लिखने दी परवाह नेईं करङन, जि'यां इलास्टिक जां बाउंस। इत्थै इक साधारण "बाउंस" कीफ्रेम टोकन दा इक उदाहरण ऐ जेह् ड़ा कूद दी ऊंचाई गी नियंत्रत करने आस्तै इक --kf-bounce-from कस्टम प्रॉपर्टी दा इस्तेमाल करदा ऐ. /* * उछाल - उछलने दा प्रवेश एनीमेशन * कूद दी ऊंचाई गी नियंत्रित करने लेई --kf-bounce-from दा इस्तेमाल करो * डिफ़ॉल्ट: 100vh (स्क्रीन बंद) थमां कूददा ऐ * इस्तेमाल दा: * एनीमेशन: केएफ-उछाल 3 एस आसानी-इन; * --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); } ऐ
22%, 45%, 64%, 79%, 90%, 97%, 100% दा { अनुवाद करना: 0 0; एनीमेशन-टाइमिंग-फंक्शन: आसान-बाहर; } ऐ } ऐ
“इलास्टिक” जनेह् एनीमेशन कीफ्रेम दे अंदर गणनाएं दे कारण थोह् ड़े मुश्कल होंदे न। असेंगी --kf-elastic-from-X ते --kf-elastic-from-Y गी बक्ख-बक्ख परिभाशत करने दी लोड़ ऐ (दोनें वैकल्पिक न), ते इकट्ठे होईये एह् असेंगी स्क्रीन पर कुसै बी बिंदु थमां इक लोचदार प्रवेश द्वार बनाने दिंदे न.
/* * लोचदार में - लोचदार प्रवेश एनीमेशन * शुरूआती स्थिति गी नियंत्रित करने लेई --kf-elastic-from-X ते --kf-elastic-from-Y दा इस्तेमाल करो * डिफ़ॉल्ट: शीर्ष केंद्र (0, -100vh) थमां दाखल होंदा ऐ * इस्तेमाल दा: * एनीमेशन: kf-लोचदार-में 2s आसानी-इन-बाहर दोनों; * --kf-लोचदार-से-एक्स: -50px; * --kf-लोचदार-से-वाई: -200px; // (-50px, -200px) थमां दर्ज करो */
@ कीफ्रेम्स केएफ-लोचदार-में { 0% { अनुवाद करो: calc (var (--kf-लोचदार-से-एक्स, -50vw) * 1) calc (var (--kf-लोचदार-से-वाई, 0px) * 1); } ऐ
16% ऐ { अनुवाद करना: 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); } ऐ
100% दा { अनुवाद करना: 0 0; } ऐ } ऐ
एह् तरीका साढ़े प्रोजेक्ट च उन्नत कीफ्रेम दा दुबारा इस्तेमाल ते अनुकूलित करना आसान बनांदा ऐ, सिर्फ इक गै कस्टम प्रॉपर्टी बदलने कन्नै।
.उछलना-और-ज़ूम { एनीमेशन: एनीमेशन: केएफ-उछाल 3s आसान-इन, केएफ-ज़ूम 3 एस रैखिक; --kf-ज़ूम-से: 0; } ऐ
.उछलना-और-स्लाइड { एनीमेशन-रचना: जोड़ना; /* दोनों एनीमेशन अनुवाद दा उपयोग करदे न */ एनीमेशन: एनीमेशन: केएफ-उछाल 3s आसान-इन, केएफ-स्लाइड-इन 3s आसान-बाहर; --kf-स्लाइड-से: -200px; } ऐ
.लोचदार-में { एनीमेशन: kf-लोचदार-में 2s आसानी-में-बाहर दोनों; } ऐ
पेन कीफ्रेम्स टोकन दिक्खो - अमित शीन द्वारा डेमो 7 [कांटा]। इस बिंदु तगर, अस दिक्खेआ ऐ जे अस किस चाल्ली कीफ्रेम गी स्मार्ट ते कुशल तरीके कन्नै समेकित करी सकने आं। बेशक, तुस अपने प्रोजेक्ट दी जरूरतें गी बेहतर तरीके कन्नै फिट करने आस्तै चीजें गी ट्वीक करना चांह् दे ओ, पर अस केईं आम एनीमेशनें ते रोजमर्रा दे इस्तेमाल दे मामलें दे उदाहरणें गी कवर कीता ऐ। ते इनें कीफ्रेम टोकनें दी जगह् उप्पर, साढ़े कोल हून पूरे प्रोजेक्ट च लगातार, बनाए रखने आह् ले एनीमेशन बनाने लेई शक्तिशाली बिल्डिंग ब्लॉक न। कोई होर डुप्लिकेट कीफ्रेम नेईं, कोई होर ग्लोबल स्कोप टकराव नेईं। बस साढ़ी सारी एनीमेशन जरूरतें गी संभालने दा इक साफ-सुथरा, सुविधाजनक तरीका। पर असली सवाल ए है कि असीं इन्हां बिल्डिंग ब्लॉकां नूं इकट्ठे किवें रचदे हां? इस सब गी इकट्ठा करना असें दिक्खेआ ऐ जे बुनियादी कीफ्रेम टोकन गी इकट्ठा करना सरल ऐ। असेंगी कुसै खास चीजै दी लोड़ नेईं ऐ सिवाय पैह् ले एनीमेशन गी परिभाशित करने, दूए गी परिभाशित करने, जरूरत मताबक चर सेट करने, ते एह् गै ऐ। /* में फीका + स्लाइड में */ .टोस्ट { एनीमेशन: एनीमेशन: केएफ-फीका-में 0.4s, केएफ-स्लाइड-इन 0.4s घन-बेज़ियर (0.34, 1.56, 0.64, 1); --kf-स्लाइड-से: 0 40px; } ऐ
/* ज़ूम इन + फीका हो जाना */ .मोडल { एनीमेशन: एनीमेशन: केएफ-फीका-में 0.3s, केएफ-ज़ूम 0.3s घन-बेज़ियर (0.34, 1.56, 0.64, 1); --kf-ज़ूम-से: 0.7 ऐ; --केएफ-ज़ूम-टू: 1; } ऐ
/* स्लाइड इन + नाड़ी */ .सूचना { एनीमेशन: एनीमेशन: केएफ-स्लाइड-इन 0.5s, ऐ। kf-पल्स 1.2s आसान-इन-आउट अनंत वैकल्पिक; --kf-स्लाइड-से: -100px 0; --केएफ-पल्स-स्केल-से: 0.95; --केएफ-पल्स-स्केल-टू: 1.05; } ऐ
एह् संयोजन खूबसूरती कन्नै कम्म करदे न कीजे हर एनीमेशन इक बक्खरी संपत्ति गी निशाना बनांदा ऐ : अपारदर्शिता, रूपांतरण (अनुवाद/स्केल), बगैरा पर कदें-कदें टकराव बी होंदे न, ते असेंगी एह् जानने दी लोड़ ऐ जे उंदे कन्नै कीऽ ते किस चाल्ली निबड़ना ऐ। जदूं दो एनीमेशन इक गै गुण गी एनिमेट करने दी कोशश करदे न — उदाहरण दे तौर पर, दौंऊ एनिमेट स्केल जां दोऐ एनिमेट अपारदर्शिता — तां नतीजा ओह् नेईं होग जेह् ड़ा तुंदी उम्मीद ऐ. डिफ़ॉल्ट रूप कन्नै, एनीमेशनें च सिर्फ इक गै असल च उस गुण पर लागू कीता जंदा ऐ, जेह् ड़ी एनीमेशन सूची च आखरी ऐ. एह् इक सीमा ऐ जे CSS इक गै प्रॉपर्टी पर मते सारे एनीमेशनें गी किस चाल्ली संभालदा ऐ. मसाल आस्तै, एह् इरादे दे मताबक कम्म नेईं करग कीजे सिर्फ kf-पल्स एनीमेशन गै लागू होग. .बुरा-कम्बो { एनीमेशन: एनीमेशन: kf-zoom 0.5s अग्गें, केएफ-नाड़ी 1.2s अनंत वैकल्पिक; --kf-ज़ूम-से: 0.5 ऐ; --केएफ-ज़ूम-टू: 1.2; --kf-नाड़ी-पैमाने-से: 0.8; --kf-पल्स-स्केल-टू: 1.1; } ऐ
एनीमेशन जोड़ना इक गै गुण गी प्रभावित करने आह् ले मते सारे एनीमेशनें गी संभालने दा सबनें थमां सरल ते सीधा तरीका एनीमेशन-रचना गुण दा इस्तेमाल करना ऐ. उपर दित्ते गेदे आखरी उदाहरन च, kf-pulse एनीमेशन kf-zoom एनीमेशन दी जगह लैंदा ऐ, इसलेई असेंगी शुरूआती ज़ूम नेईं दिक्खना होग ते 1.2 दा उम्मीदवार पैमाना नेईं मिलग. एनीमेशन-रचना गी जोड़ने आस्तै सेट करियै, अस ब्राउज़र गी दस्सने आं जे ओह् दौनें एनीमेशनें गी इकट्ठा करै। इस कन्नै असेंगी ओह नतीजा मिलदा ऐ जेह्ड़ा अस चाह्न्दे आं। .घटक-दो { एनीमेशन-रचना: जोड़ना; } ऐ
पेन कीफ्रेम्स टोकन दिक्खो - अमित शीन द्वारा डेमो 8 [कांटा]। एह् तरीका मते सारे मामलें आस्तै ठीक कम्म करदा ऐ जित्थें अस इक गै संपत्ति उप्पर प्रभावें गी इकट्ठा करना चांह्दे आं । एह् उसलै बी उपयोगी होंदा ऐ जिसलै असेंगी एनीमेशनें गी स्थिर संपत्ति मूल्यें कन्नै जोड़ने दी लोड़ होंदी ऐ। मसाल आस्तै, जेकर साढ़े कोल कोई तत्व ऐ जेह् ड़ा अनुवाद प्रॉपर्टी दा इस्तेमाल करदा ऐ तां जे इसगी ठीक उस्सै थाह् र पर रक्खेआ जाई सकै जित्थें अस चाह् ने आं, ते फ्ही अस इसगी kf-slide-in कीफ्रेम कन्नै एनिमेट करना चांह् दे आं, तां असेंगी एनीमेशन-रचना दे बगैर इक गंदी दिक्खने आह् ली कूद मिलदी ऐ। पेन कीफ्रेम्स टोकन दिक्खो - अमित शीन द्वारा डेमो 9 [कांटा]। एनीमेशन-रचना जोड़ने लेई सेट होने कन्नै, एनीमेशन गी मौजूदा कन्नै सुचारू रूप कन्नै जोड़ेआ जंदा ऐरूपांतरित होंदा ऐ, तां जे तत्व अपनी जगह पर रौंह्दा ऐ ते उम्मीद दे मताबक जीवंत होंदा ऐ। एनीमेशन डगमगाना कई एनीमेशनें गी संभालने दा इक होर तरीका ऐ उनेंगी "डगमगाना" — यानी पैह् ले दे खत्म होने दे थोह् ड़े बाद गै दूआ एनीमेशन शुरू करो। एह् कोई समाधान नेईं ऐ जेह् ड़ा हर मामले आस्तै कम्म करदा ऐ , पर एह् उसलै उपयोगी होंदा ऐ जिसलै साढ़े कोल इक प्रवेश एनीमेशन होंदा ऐ ते उसदे बाद इक निरंतर एनीमेशन होंदा ऐ । /* फीका हो जाओ + अपारदर्शिता नाड़ी */ .सूचना { एनीमेशन: एनीमेशन: केएफ-फीका-इन 2s आसान-बाहर, kf-पल्स 0.5s 2s आसानी-इन-आउट अनंत वैकल्पिक; --kf-नाड़ी-अस्पष्टता-के लिए: 0.5; } ऐ
पेन कीफ्रेम्स टोकन दिक्खो - अमित शीन द्वारा डेमो 10 [कांटा]। आर्डर मैट्स एनीमेशनें दा इक बड्डा हिस्सा जिंदे कन्नै अस कम्म करने आं। ज्यादातर मामलें च, एह् सिर्फ मता सुविधाजनक ऐ। इसदे कन्नै गै प्रदर्शन दा फायदा बी ऐ की जे ट्रांसफॉर्म एनीमेशन गी जीपीयू-एक्सेलरेटेड कीता जाई सकदा ऐ। पर जेकर अस रूपांतरण दा इस्तेमाल करदे आं तां असेंगी एह् स्वीकार करने दी लोड़ ऐ जे जिस क्रम च अस अपने रूपांतरणें गी करदे आं, ओह् महत्वै आह्ला ऐ। ढेर सारा। अज्जै तगर अपने कीफ्रेम च, अस व्यक्तिगत रूपांतरणें दा इस्तेमाल कीता ऐ। स्पेक्स दे अनुसार, एह् हमेशा इक निश्चित क्रम च लागू कीते जंदे न: पैह् ले, तत्व गी अनुवाद मिलदा ऐ, फिर घुमाना, फिर स्केल। एह् गल्ल समझ च औंदी ऐ ते एह् गै साढ़े कोला मते सारें दी उम्मीद ऐ। पर, जेकर अस ट्रांसफॉर्म प्रॉपर्टी दा इस्तेमाल करदे आं तां जिस क्रम च फंक्शनें गी लिखेआ जंदा ऐ, ओह् क्रम ऐ जिस च उनेंगी लागू कीता जंदा ऐ। इस मामले च जेकर अस कुसै चीज़ गी एक्स-अक्ष पर 100 पिक्सेल लेई जाचे ते फिर उसगी 45 डिग्री घुमाचै तां एह् उस्सै चाल्लीं नेईं ऐ जेह्ड़ा पैह्लें 45 डिग्री घुमाइयै फिरी 100 पिक्सेल लेई जाचै। /* गुलाबी वर्ग: पहले अनुवाद करो, फिर घुमाओ */ .उदाहरण-एक { रूपांतरण: अनुवाद एक्स (100px) घुमाओ (45deg); } ऐ
/* हरे वर्ग: पहले घुमाओ, फिर अनुवाद करो */ .उदाहरण-दो { रूपांतरण: घुमाओ (45deg) अनुवाद एक्स (100px); } ऐ
पेन कीफ्रेम्स टोकन दिक्खो - अमित शीन द्वारा डेमो 11 [कांटा]। पर ट्रांसफॉर्म क्रम दे अनुसार, सारे व्यक्तिगत ट्रांसफॉर्म — हर इक चीज़ जिसदा अस कीफ्रेम टोकन आस्तै इस्तेमाल कीता ऐ — ट्रांसफॉर्म फंक्शनें थमां पैह् ले होंदा ऐ। मतलब जे किश बी तुस ट्रांसफॉर्म प्रॉपर्टी च सेट करदे ओ एनीमेशनें दे बाद होग। पर जेकर तुस सेट करदे ओ, उदाहरण दे तौर पर, kf-spin कीफ्रेम कन्नै मिलियै अनुवाद करो, तां अनुवाद एनीमेशन थमां पैह् ले होग. उलझन में अजे तक?! इस कन्नै ऐसी स्थिति पैदा होंदी ऐ जित्थै स्थिर मूल्य इक गै एनीमेशन आस्तै बक्ख-बक्ख नतीजे पैदा करी सकदे न, जि'यां निम्नलिखित मामले च:
/* दोनों स्पिनर के लिए आम एनीमेशन */ .स्पिनर { एनीमेशन: केएफ-स्पिन 1 एस रैखिक अनंत; } ऐ
/* गुलाबी स्पिनर: घुमाने से पहले अनुवाद करें (व्यक्तिगत रूपांतरण) */ .स्पिनर-गुलाबी { अनुवाद करना: 100% 50%; } ऐ
/* ग्रीन स्पिनर: घुमाओ फिर अनुवाद करो (फंक्शन क्रम) */ .स्पिनर-हरे रंग दा { रूपांतरण: अनुवाद करना (100%, 50%); } ऐ
पेन कीफ्रेम्स टोकन दिक्खो - अमित शीन द्वारा डेमो 12 [कांटा]। तुस दिक्खी सकदे ओ जे पैह् ले स्पिनर (गुलाबी) गी इक अनुवाद मिलदा ऐ जेह् ड़ा kf-spin दे घुमाने थमां पैह् ले होंदा ऐ, इस करी ओह् पैह् ले अपनी जगह पर चली जंदा ऐ ते फिर स्पिन करदा ऐ। दूए स्पिनर (हरे रंग दा) गी इक translate() फंक्शन मिलदा ऐ जेह् ड़ा व्यक्तिगत रूपांतरण दे बाद होंदा ऐ, इसलेई तत्व पैह् ले स्पिन करदा ऐ, फिर अपने मौजूदा कोन दे सापेक्ष चलदा ऐ, ते असेंगी ओह चौड़ा कक्षा प्रभाव मिलदा ऐ। नहीं, एह् कोई बग नेईं ऐ। एह् सिर्फ उनें गल्लें च शामल ऐ जेह् ड़ी असेंगी CSS दे बारे च जानने दी लोड़ ऐ ते मल्टीपल एनीमेशन जां मल्टीपल ट्रांसफॉर्म कन्नै कम्म करदे बेल्लै ध्यान च रक्खने दी लोड़ ऐ। जेकर लोड़ होए तां तुस kf-spin-alt कीफ्रेम दा इक अतिरिक्त सेट बी बनाई सकदे ओ जेह् ड़ा rotate() फ़ंक्शन दा इस्तेमाल करियै तत्वें गी घुमांदा ऐ. गति च कमी आई ते जदूं अस वैकल्पिक कीफ्रेम दी गल्ल करा’रदे आं तां अस “कोई एनीमेशन” विकल्प गी नजरअंदाज नेईं करी सकदे। कीफ्रेम टोकन दा इस्तेमाल करने दा इक बड्डा फायदा एह् ऐ जे सुलभता गी बेक कीता जाई सकदा ऐ, ते असल च एह् करना काफी आसान ऐ। सुलभता गी ध्यान च रक्खियै साढ़े कीफ्रेम गी डिजाइन करियै, अस एह् सुनिश्चत करी सकने आं जे जेह् ड़े बरतूनी घट्ट गति गी पसंद करदे न, उ’नेंगी बिना कुसै अतिरिक्त कम्म जां कोड डुप्लिकेशन दे, इक सुचारू, कम विचलित करने आह् ला अनुभव हासल होऐ। "कम गति" दा सटीक अर्थ इक एनीमेशन थमां दुए एनीमेशन च, ते प्रोजेक्ट थमां दूए प्रोजेक्ट च थोड़ा बदली सकदा ऐ, पर इत्थें ध्यान च रक्खने आस्तै किश महत्वपूर्ण बिंदु न: कीफ्रेम म्यूट करना जदके किश एनीमेशनें गी नरम जां धीमा कीता जाई सकदा ऐ, तां किश ऐसे बी न जेह् ड़े घट्ट गति दी मंग होने पर पूरी चाल्ली गायब होई जंदे न। पल्स एनीमेशन इक अच्छा उदाहरण ऐ। एह् सुनिश्चत करने आस्तै जे एह् एनीमेशन रिड्यूस्ड मोशन मोड च नेईं चलदे, अस बस इन्हें गी उचित मीडिया क्वेरी च लपेटी सकने आं।
@ मीडिया (पसंद-कम-गति: कोई-पसंदीदा) { @ keyfrmaes के एफ-नाड़ी { से { पैमाने: var (--kf-नाड़ी-पैमाने-से, 1); अस्पष्टता: var (--kf-नाड़ी-अस्पष्टता-से, 1); } ऐ करने के लिये { पैमाने: var (--kf-नाड़ी-पैमाने-के लिए, 1); अपारदर्शिता: 1।var (--kf-नाड़ी-अस्पष्टता-के, 1); } ऐ } ऐ } ऐ
एह् इस गल्लै गी सुनिश्चत करदा ऐ जे जिनेंगी घट्ट करने लेई पसंद-कम-गति सेट कीता गेदा ऐ, उ’नेंगी एनीमेशन नेईं दिक्खना होग ते उ’नेंगी उंदी पसंद कन्नै मेल खंदा अनुभव हासल होग. इंस्टेंट इन किश कीफ्रेम न जेह् ड़े अस बस हटाई नेईं सकदे, जि’यां प्रवेश एनीमेशन। मूल्य बदलना चाहिदा, जीवंत होना चाहिदा; नेईं ते, तत्व दे सही मूल्य नेईं होङन. पर घट्ट गति च, शुरूआती मूल्य थमां एह् संक्रमण तुरत होना चाहिदा ऐ। इसगी हासल करने आस्तै, अस कीफ्रेम दा इक अतिरिक्त सेट परिभाशत करगे जित्थै मूल्य तुरत अंत स्थिति च कूददा ऐ। एह् साढ़े डिफ़ॉल्ट कीफ्रेम बनी जंदे न। फिर, अस पसंदीदा-कम-गति आस्तै इक मीडिया क्वेरी दे अंदर नियमित कीफ्रेम जोड़गे जेह् ड़े नो-पसंद पर सेट कीते गेदे न, जि’यां पिछले उदाहरन च. /* कम गति लेई तुरंत पॉप इन करो */ @ कीफ्रेम्स केएफ-ज़ूम { से, ते { पैमाने: var (--kf-ज़ूम-टू, 1); } ऐ } ऐ
@ मीडिया (पसंद-कम-गति: कोई-पसंदीदा) { /* मूल ज़ूम कीफ्रेम */ @ कीफ्रेम्स केएफ-ज़ूम { से { पैमाने: var (--kf-ज़ूम-से, 0.8); } ऐ करने के लिये { पैमाने: var (--kf-ज़ूम-टू, 1); } ऐ } ऐ } ऐ
इस चाल्ली, जेह् ड़े बरतूनी घट्ट गति गी पसंद करदे न ओह् तत्व गी तुरत अपनी अंतिम स्थिति च दिक्खने गी मिलङन, जदके बाकी सारें गी एनिमेटेड संक्रमण मिलदा ऐ। द सॉफ्ट एप्रोच ऐसे मामले बी होंदे न जित्थें अस किश हलचल जरूर रखना चांह्दे आं, पर मूल एनीमेशन कोला मता नरम ते शांत। मसलन, अस बाउंस एंट्री गी कोमल फेड-इन कन्नै बदली सकने आं।
@ कीफ्रेम्स केएफ-बाउंस { /* कम गति आस्तै नरम फीका-इन */ } ऐ
@ मीडिया (पसंद-कम-गति: कोई-पसंदीदा) { @ कीफ्रेम्स केएफ-बाउंस { /* मूल उछाल कीफ्रेम */ } ऐ } ऐ
हुण, घट्ट गति सक्षम कीते गेदे बरतूनी गी अजें बी दिक्खने दा एहसास होंदा ऐ, पर उछाल जां लोचदार एनीमेशन दी तीव्र गतिविधि दे बगैर। बिल्डिंग ब्लॉक दी जगह् उप्पर होने कन्नै अगला सवाल एह् ऐ जे उनेंगी असल वर्कफ़्लो दा हिस्सा कि’यां बनाया जा। लचीले कीफ्रेम लिखना इक गल्ल ऐ, पर इक बड्डे प्रोजेक्ट च उनेंगी भरोसेमंद बनाने लेई किश रणनीतियें दी लोड़ होंदी ऐ जेह् ड़ियां मिगी कठिन तरीके कन्नै सिक्खनी पौंदियां हियां। कार्यान्वयन रणनीतियां ते बेहतरीन प्रथाएं इक बारी जेकर साढ़े कोल कीफ्रेम टोकन दी इक ठोस लाइब्रेरी होंदी ऐ तां असली चुनौती एह् ऐ जे उनेंगी रोजमर्रा दे कम्में च किस चाल्ली लाना ऐ।
प्रलोभन ऐ जे इक बारी च सारे कीफ्रेम गी अंदर छोड़ी दित्ता जा ते समस्या दा हल घोशित कीता जा, पर व्यवहार च मैं पाया ऐ जे धीरे-धीरे अपनाने थमां बेहतरीन नतीजे औंदे न। सब्भनें शा आम एनीमेशनें कन्नै शुरू करो, जि’यां फीका जां स्लाइड। एह् आसान जीतें न जेह् ड़ियां बड्डे पुनर्लेखन दी लोड़ दे बगैर फौरन मूल्य दस्सदियां न। नामकरण इक होर बिंदु ऐ जेह्ड़ा ध्यान देने दे काबिल ऐ। इक लगातार उपसर्ग जां नेमस्पेस एह् साफ करदा ऐ जे कुन कुन एनीमेशन टोकन न ते कुन कुन लोकल वन-ऑफ न. एह् आकस्मिक टक्कर गी बी रोकदा ऐ ते नमीं टीम दे सदस्यें गी इक नज़र च साझा सिस्टम गी पन्छानने च मदद करदा ऐ। दस्तावेजीकरण उतनी गै जरूरी ऐ जितना कि कोड अपने आपै च। हर कीफ्रेम टोकन दे उप्पर इक छोटी जेही टिप्पणी बी बाद च घंटें दे अनुमान गी बचाई सकदी ऐ। इक डेवलपर गी टोकन फाइल गी खोलने, उसी लोड़चदे प्रभाव आस्तै स्कैन करने ते बरतून पैटर्न गी सीधे अपने घटक च नकल करने च सक्षम होना चाहिदा ऐ. लचीलापन गै इस पद्धति गी मेहनत दे काबिल बनांदा ऐ। समझदार कस्टम गुणें गी उजागर करियै, अस टीमें गी सिस्टम गी तोड़े बगैर एनीमेशन गी अनुकूलित करने दी गुंजाइश दिंदे न। इसदे कन्नै गै कोशश करो जे मता जटिल नेईं होऐ। घुंडी उपलब्ध करोआओ जेह् ड़े महत्वै आह् ले न ते बाकी गी राय देइयै रक्खो। आखरी च, सुलभता गी याद करो। हर एनीमेशन गी घट्ट गति विकल्प दी लोड़ नेईं ऐ, पर मते सारें गी ऐ। इनें समायोजनें च जल्दी बेक करने दा मतलब ऐ जे असेंगी बाद च कदें बी इन्हें गी रिट्रोफिट नेईं करना पौंदा, ते एह् इक ऐसी स्तर दी देखभाल दस्सदा ऐ जेह् ड़ी साढ़े बरतूनी गी दिक्खी लैग भलेआं ओह् कदें बी इसदा जिक्र नेईं करन।
मेरे अनुभव च, कीफ्रेम टोकन गी साढ़े डिजाइन टोकन वर्कफ़्लो दे हिस्से दे रूप च पेश करना गै ऐ जेह् ड़ा उनेंगी चिपकने आह् ला बनांदा ऐ। इक बारी जेकर ओह् अपनी जगह पर होंदे न तां ओह् स्पेशल इफेक्ट्स दा एहसास करना बंद करी दिंदे न ते डिजाइन भाशा दा हिस्सा बनी जंदे न, जेह् ड़ी उत्पाद किस चाल्लीं चलदा ऐ ते किस चाल्लीं प्रतिक्रिया दिंदा ऐ, इसदा इक कुदरती विस्तार ऐ। लपेटना एनीमेशन इंटरफेस बनाने दे सबतूं खुशी आह्ला हिस्सा होई सकदा ऐ, पर संरचना दे बगैर, एह् बी निराशा दे बड्डे स्रोत च शामल होई सकदे न। कीफ्रेम गी टोकन दे रूप च समझियै, तुस कोई ऐसी चीज़ लैंदे ओ जेह् ड़ी आमतौर पर गन्दा ते प्रबंधत करना मुश्कल होंदी ऐ ते इसगी इक साफ, पूर्वानुमान प्रणाली च बदलदे ओ। असली मूल्य सिर्फ कोड दी किश लाइनें गी सेव करने च नेईं ऐ। एह् इस भरोसे च ऐ जे जदूं तुस फीका, स्लाइड, ज़ूम, जां स्पिन दा इस्तेमाल करदे ओ तां तुसेंगी ठीक-ठाक पता ऐ जे एह् पूरे प्रोजेक्ट च केह् बर्ताव करग। एह् लचीलापन च ऐ जेह्ड़ा अंतहीन बदलावें दी अराजकता दे बगैर कस्टम संपत्तियें थमां औंदा ऐ। ते एह् नींह् च बनी दी सुलभता च ऐ ना के इसदे रूप च जोड़ेआ गेआ ऐइक आफ्टर थॉट। मैं एह् विचार बक्ख-बक्ख टीमें ते बक्ख-बक्ख कोडबेस च कम्म करदे दिक्खेआ ऐ, ते पैटर्न हमेशा इक गै होंदा ऐ। इक बारी टोकन अपनी जगह पर होने पर कीफ्रेम चालें दा बिखरे दा संग्रह होना बंद करी दिंदा ऐ ते डिजाइन भाशा दा हिस्सा बनी जंदा ऐ। एह् उत्पाद गी होर इरादे कन्नै, मता सुसंगत ते मता जिंदा महसूस करांदे न। जेकर तुस इस लेख थमां इक गल्ल लैंदे ओ तां एह् ऐ जे एनीमेशन उस्सै देखभाल ते संरचना दे हकदार न जेह् ड़ी अस पैह् ले थमां गै रंगें, टाइपोग्राफी, ते स्पेसिंग गी दिंदे आं। कीफ्रेम टोकन च इक छोटा सा निवेश हर बारी जेकर तुंदा इंटरफेस चलदा ऐ तां फलदा-फूलदा ऐ।
