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