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