CSS एनिमेशन जनरेटर

कैसे उपयोग करें

1. एनिमेशन प्रीसेट चुनें: सामान्य एनिमेशन में से चुनें, फ़ेड, स्लाइड, बाउंस, रोटेट, पल्स, शेक आदि।
2. अवधि और व्यवहार अनुकूलित करें: अवधि, विलंब, easing, पुनरावृत्ति संख्या और fill mode समायोजित करें।
3. CSS कॉपी करें: पूरी @keyframes परिभाषा और animation शॉर्टहैंड प्रॉपर्टी आपकी स्टाइलशीट में पेस्ट करने के लिए तैयार हैं।

CSS एनिमेशन जनरेटर क्यों इस्तेमाल करें?

CSS एनिमेशन इंटरफ़ेस को जीवंत बनाते हैं, मुख्य तत्वों पर ध्यान आकर्षित करते हैं, दृश्य प्रतिक्रिया देते हैं और आकर्षक अनुभव बनाते हैं।

विशेषताएँ

• एनिमेशन प्रीसेट: फ़ेड, स्लाइड, बाउंस, रोटेट, पल्स, शेक, फ़्लिप, ज़ूम आदि, सभी लाइव पूर्वावलोकन के साथ।
• कस्टम कीफ़्रेम संपादक: दृश्य इंटरफ़ेस के साथ शून्य से अपनी एनिमेशन बनाएँ।
• टाइमिंग नियंत्रण: अवधि (ms/s), विलंब, easing (linear, ease, cubic-bezier) और पुनरावृत्ति संख्या सेट करें।
• फ़िल मोड: forwards, backwards, both और none व्यवहार नियंत्रित करें।
• JavaScript की आवश्यकता नहीं: सभी जनरेट की गई एनिमेशन शुद्ध CSS में हैं, कोई लाइब्रेरी या फ़्रेमवर्क नहीं।

अक्सर पूछे जाने वाले प्रश्न

CSS में एनिमेशन और ट्रांज़िशन में क्या अंतर है?

CSS ट्रांज़िशन राज्य परिवर्तनों (होवर, फ़ोकस, क्लास टॉगल) पर शुरू होते हैं और दो अवस्थाओं के बीच एनिमेट करते हैं। CSS एनिमेशन कई अवस्थाओं को परिभाषित करने के लिए @keyframes का उपयोग करते हैं और उपयोगकर्ता इंटरैक्शन से स्वतंत्र रूप से चलते हैं, वे लूप, रिवर्स और स्वचालित रूप से शुरू हो सकते हैं।

animation-fill-mode क्या है और यह क्यों महत्वपूर्ण है?

animation-fill-mode नियंत्रित करता है कि क्या तत्व एनिमेशन के शुरू होने से पहले (backwards), इसके समाप्त होने के बाद (forwards), या दोनों से शैलियों को बनाए रखता है। forwards के बिना, तत्व एनिमेशन के अंत में अपनी मूल शैली पर वापस आ जाता है।

क्या CSS एनिमेशन प्रदर्शन-अनुकूल हैं?

केवल transform और opacity का उपयोग करने वाले एनिमेशन GPU-त्वरित और बहुत सहज होते हैं। width, height, margin या top/left जैसी लेआउट प्रॉपर्टीज़ को एनिमेट करने से बचें, वे लेआउट पुनर्गणना को ट्रिगर करते हैं और जैंक का कारण बन सकते हैं। 60 fps के लिए transform और opacity पर टिके रहें।

CSS एनिमेशन वास्तव में क्या करते हैं

CSS एनिमेशन समय के साथ परिभाषित कीफ़्रेमों के बीच एक या अधिक CSS गुणों को इंटरपोलेट करते हैं, JavaScript के बिना दृश्यमान गति या परिवर्तन उत्पन्न करते हैं। मॉडल के दो भाग हैं: @keyframes नियम परिभाषित करते हैं कि एनिमेशन प्रतिशत-आधारित चरणों (0% से 100%) पर कैसा दिखता है, और animation शॉर्टहैंड गुण (या इसके लॉन्गहैंड भाई animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-fill-mode) ब्राउज़र को बताता है कि उस कीफ़्रेम परिभाषा को कैसे चलाना है। ब्राउज़र सभी इंटरपोलेशन, ईज़िंग और फ़्रेम टाइमिंग को C++ में संभालता है, आमतौर पर transform और opacity परिवर्तनों के लिए GPU-त्वरित।

एनिमेशन CSS संक्रमणों से दो तरीकों से भिन्न होते हैं। संक्रमण किसी तत्व की स्थिति बदलने पर सक्रिय होते हैं (एक होवर, एक क्लास टॉगल, एक फ़ोकस इवेंट) और ठीक दो मूल्यों के बीच इंटरपोलेट करते हैं: पुराना और नया। एनिमेशन स्थिति से स्वतंत्र रूप से चलते हैं, मनमाने ढंग से कीफ़्रेम चरणों की संख्या का अनुसरण करते हैं, अनिश्चित काल तक लूप कर सकते हैं, उल्टा चल सकते हैं, और CSS या JavaScript के माध्यम से ट्रिगर, रोके और फिर से शुरू किए जा सकते हैं। संक्रमण «आधे सेकंड में A से B तक स्नैप करें» के लिए सही उपकरण हैं; एनिमेशन «इस ध्यान-आकर्षित करने वाले पल्स को हमेशा के लिए लूप करें» या «तत्व प्रकट होने पर इस प्रवेश क्रम को एक बार चलाएँ» के लिए सही उपकरण हैं।

आधुनिक वेब डिज़ाइन के लिए, CSS एनिमेशन उन कई चीजों को बदल देते हैं जो पहले JavaScript पुस्तकालयों की आवश्यकता थी। स्पिनर, फ़ेड-इन, स्लाइड-अप, ध्यान पल्स, सफलता टिक: सभी अब मानक CSS पैटर्न हैं। ट्रेड-ऑफ जटिल अनुक्रमों के लिए अभिव्यंजकता है। CSS एनिमेशन बहुत कुछ कर सकते हैं लेकिन समकालिक संपत्ति परिवर्तनों के साथ 5 से 7 कीफ़्रेम चरणों के आसपास सुविधाजनक होना बंद कर देते हैं; स्टोरीबोर्ड एनिमेशन, स्क्रॉल-लिंक्ड अनुक्रमों, या JavaScript स्थिति पर निर्भर किसी भी गतिशील चीज़ के लिए, समर्पित पुस्तकालय (GSAP, Framer Motion, Web Animations API) बेहतर विकल्प बने रहते हैं।

यह उपकरण पर्दे के पीछे कैसे काम करता है

जब आप एक प्रीसेट चुनते हैं (जैसे «bounce» या «fade-in»), उपकरण पूर्वावलोकन क्षेत्र में एक पूर्वनिर्धारित @keyframes स्ट्रिंग लोड करता है और पूर्वावलोकन बॉक्स पर एनिमेशन गुण लागू करता है। कीफ़्रेम वास्तविक CSS हैं, कस्टम प्रारूप नहीं: आप जो देखते हैं वह कॉपी करने के लिए जो आपको मिलता है। स्लाइडर वास्तविक समय में इनलाइन animation गुण को संपादित करके एनिमेशन समय मान (अवधि, देरी, पुनरावृत्ति गणना) को अपडेट करते हैं, इसलिए पूर्वावलोकन बिना पेज रीलोड के तुरंत हर परिवर्तन को दर्शाता है।

ईज़िंग फ़ंक्शन चयन मानक CSS timing-function मानों का उपयोग करता है: linear (स्थिर गति), ease (डिफ़ॉल्ट, धीमी शुरुआत और अंत), ease-in (धीमी शुरुआत), ease-out (धीमा अंत), ease-in-out (धीमी शुरुआत और अंत), या कस्टम वक्रों के लिए cubic-bezier(x1, y1, x2, y2)। दृश्यमान एनिमेशन वक्र ब्राउज़र के मूल timing-function कार्यान्वयन द्वारा गणना की जाती है; पूर्वावलोकन वास्तविक ब्राउज़र-रेंडर किया गया आउटपुट है, JavaScript सिमुलेशन नहीं।

कोड बॉक्स आपको स्टाइलशीट में डालने के लिए आवश्यक पूर्ण CSS दिखाता है: दोनों @keyframes ब्लॉक और .your-class { animation: ... } घोषणा। «CSS कॉपी करें» पर क्लिक करें और दोनों एक टेक्स्ट ब्लॉक के रूप में आपके क्लिपबोर्ड पर लिखे जाते हैं। कोई फ़ाइल उत्पन्न नहीं की जाती, कोई सर्वर कुछ भी संसाधित नहीं करता, और उपकरण के पास कॉल करने के लिए कोई बैकएंड नहीं है। पूर्वावलोकन, कोड पीढ़ी और क्लिपबोर्ड लेखन सभी आपके डिवाइस पर JavaScript में होते हैं। पृष्ठ ताज़ा करें और आपका कस्टम कॉन्फ़िगरेशन तब तक चला जाता है जब तक आपने इसे पहले कॉपी नहीं किया।

वेब एनिमेशन का संक्षिप्त इतिहास

• Flash वेब मोशन पर हावी है, 1996 से 2010।Adobe Flash (मूल रूप से Macromedia) 2000 के दशक की शुरुआत में वेब एनिमेशन के लिए प्राथमिक उपकरण है। वेक्टर-आधारित, टाइमलाइन-संचालित, एक कस्टम प्लगइन रनटाइम के साथ। 2010 तक, Flash अधिकांश बैनर विज्ञापनों, YouTube वीडियो प्लेयर और Newgrounds-युग के खेलों को संचालित करता है। फिर मोबाइल डिवाइस इसे मारते हैं: iPhone ने कभी Flash का समर्थन नहीं किया, Android ने 2012 में समर्थन छोड़ दिया, ब्राउज़र 2020 तक प्लगइन को अप्रचलित कर देते हैं।
• WebKit में CSS संक्रमण, 2007।Apple का WebKit इंजन 2007 में -webkit-transition भेजता है, पहला आम तौर पर तैनात CSS एनिमेशन प्रिमिटिव। प्रारंभिक iPhone वेब ऐप्स में भारी रूप से उपयोग किया गया। 2009 तक संपत्ति CSS विशिष्टता प्रक्रिया में है और 2014 तक ब्राउज़र में बिना उपसर्ग के भेजी जाती है।
• CSS Animations Module Level 1, 2009।WebKit मार्च 2009 में -webkit-animation और @-webkit-keyframes जोड़ता है, W3C CSS Animations Module Level 1 ड्राफ्ट (2009 भी) से पहले। Firefox संस्करण 5 (2011) में अनुसरण करता है, IE संस्करण 10 (2012) में। «बुनियादी एनिमेशन के लिए कोई JavaScript आवश्यक नहीं» युग शुरू होता है।
• GSAP और JS एनिमेशन पुस्तकालय, 2008 से।jQuery का .animate() विधि (2006) JS एनिमेशन पुस्तकालय युग शुरू करता है; GreenSock Animation Platform (GSAP, 2008 में लॉन्च) जटिल अनुक्रमित एनिमेशन, टाइमलाइन स्क्रबिंग और प्रदर्शन के लिए स्वर्ण मानक बन जाता है। Disney, Coca-Cola और Awwwards-स्तरीय मार्केटिंग साइटों में उपयोग किया जाता है। CSS एनिमेशन के साथ सह-अस्तित्व जारी रखता है: अनुक्रमित जटिलता के लिए GSAP, घोषणात्मक सरलता के लिए CSS।
• Web Animations API मानकीकृत, 2014 से 2018।W3C Web Animations विशिष्टता एक JavaScript API प्रदान करती है जो CSS एनिमेशन को उजागर करती है और प्रोग्रामेटिक नियंत्रण जोड़ती है: element.animate(keyframes, options)। Chrome संस्करण 36 (2014) में भेजता है, Firefox संस्करण 75 (2020) में, Safari संस्करण 13.1 (2020) में। घोषणात्मक CSS और पूर्ण-पुस्तकालय-शक्ति JavaScript के बीच की खाई को पाटता है।
• स्क्रॉल-संचालित एनिमेशन उतरते हैं, 2023 से 2024।CSS Scroll-driven Animations मॉड्यूल animation-timeline पेश करता है, CSS एनिमेशन को समय के बजाय (या इसके अलावा) स्क्रॉल स्थिति से बाँधने देता है। Chrome 115 (जुलाई 2023) पहले भेजता है; Safari और Firefox 2024 और 2025 के माध्यम से समर्थन जोड़ते हैं। शुद्ध CSS में parallax प्रभाव, स्क्रॉल-प्रगति संकेतक और अनुभाग प्रकट एनिमेशन अनलॉक करता है।

वास्तविक दुनिया के कार्यप्रवाह

• लोडिंग स्पिनर और कंकाल स्थितियाँ।एक घूमता हुआ लोडर (animation: spin 1s linear infinite 360-डिग्री रोटेशन कीफ़्रेम के साथ) सबसे सामान्य CSS एनिमेशन उपयोग है। एक स्लाइडिंग शिमर प्रभाव के साथ कंकाल स्क्रीन एक translateX या background-position एनिमेशन का उपयोग करते हैं। दोनों कथित प्रदर्शन के लिए आवश्यक हैं: जबकि सामग्री लोड होती है, एनिमेशन उपयोगकर्ताओं को बताता है «हम इस पर काम कर रहे हैं» न कि «यह टूटा हुआ है»।
• होवर और फ़ोकस माइक्रो-इंटरैक्शन।होवर पर सूक्ष्म रूप से पल्स करने वाले बटन, फ़ोकस पर उठने वाले कार्ड, क्लिक पर हिलने वाले आइकन: ये माइक्रो-इंटरैक्शन घुसपैठ के बिना व्यक्तित्व जोड़ते हैं। «एक बार चलाएँ और रहें» व्यवहार के लिए animation-iteration-count: 1 और animation-fill-mode: forwards के साथ एनिमेशन का उपयोग करें, या «होवर स्थिति पर स्नैप» पैटर्न के लिए संक्रमण।
• ध्यान आकर्षित करने वाले CTAs।धीमी, निरंतर पल्स या श्वास-चमक एनिमेशन के साथ एक प्राथमिक कॉल-टू-एक्शन बटन आक्रामक हुए बिना आँख खींचता है। शांत, श्वास लय के लिए transform: scale(1) to scale(1.05) को animation-iteration-count: infinite और 3 से 4-सेकंड की अवधि के साथ संयोजित करें। तेज़ पल्स से बचें; वे उन्मादी महसूस होते हैं और उपयोगकर्ताओं को जल्दी परेशान करते हैं।
• पृष्ठ प्रवेश और अनुभाग प्रकटीकरण।पृष्ठ लोड या स्क्रॉल-इन-व्यू पर फ़ेड-इन और स्लाइड-अप एनिमेशन पॉलिश आगमन बनाते हैं। CSS सरल मामले को संभालता है (एनिमेशन जो लोड पर एक बार चलते हैं); स्क्रॉल-ट्रिगर्ड प्रविष्टियों के लिए, JavaScript में IntersectionObserver एक क्लास जोड़ता है जो तत्व के व्यूपोर्ट में प्रवेश करने पर एनिमेशन को ट्रिगर करता है। आधुनिक स्क्रॉल-संचालित एनिमेशन इस पैटर्न को शुद्ध CSS में बदलना शुरू कर रहे हैं।
• सफलता प्रतिक्रिया और त्रुटि हिलाव।फॉर्म सबमिशन प्रतिक्रिया एनिमेशन संकेतों का उपयोग करती है: एक सफल सेव एक संक्षिप्त बाउंस-इन एनिमेशन के साथ एक हरे चेकमार्क दिखाता है, जबकि एक त्रुटि फॉर्म को संक्षिप्त रूप से हिलाती है (translateX कीफ़्रेम 0.4 सेकंड में -10px और +10px के बीच बदलते हुए)। ये छोटे स्पर्श इंटरैक्शन को प्रतिक्रियाशील और जानबूझकर महसूस कराते हैं।
• मार्केटिंग हीरो और कथा अनुक्रम।लैंडिंग पेज और हीरो अनुभाग अक्सर डिज़ाइन किए गए अनुक्रम के माध्यम से ध्यान केंद्रित करने के लिए चरणबद्ध प्रवेश एनिमेशन का उपयोग करते हैं (लोगो फेड इन करता है, हेडलाइन ऊपर स्लाइड करता है, CTA बटन पल्स करता है)। तीन भाई-बहन तत्वों पर एनिमेशन देरी (animation-delay: 0s, 0.3s, 0.6s) JavaScript ऑर्केस्ट्रेशन की आवश्यकता के बिना एक चरणबद्ध प्रभाव बनाती है।

सामान्य नुकसान और उनका क्या मतलब है

• लेआउट गुणों को एनिमेट करना प्रदर्शन को मार देता है।width, height, margin, padding, top, left, right, bottom और font-size जैसी गुण हर एनिमेशन फ़्रेम पर लेआउट पुनर्गणना ट्रिगर करते हैं, अक्सर जैंक या 60fps से नीचे प्रदर्शन का कारण बनते हैं। left के बजाय transform: translateX() का उपयोग करें, width/height के बजाय transform: scale(), और visibility के बजाय opacity। Transform और opacity GPU-कम्पोज़िट हैं और लेआउट ट्रिगर नहीं करते।
• prefers-reduced-motion को अनदेखा करना पहुँच को नुकसान पहुँचाता है।कुछ उपयोगकर्ता वेब एनिमेशन से ट्रिगर मोशन सिकनेस या वेस्टिबुलर विकार अनुभव करते हैं। prefers-reduced-motion: reduce मीडिया क्वेरी उपयोगकर्ताओं को OS स्तर पर ऑप्ट आउट करने देती है। अपने सजावटी एनिमेशन को @media (prefers-reduced-motion: no-preference) { ... } में लपेटें या कम मोशन का अनुरोध करने वाले उपयोगकर्ताओं के लिए animation-duration: 0.01ms सेट करें। आवश्यक एनिमेशन (लोडिंग स्पिनर) रह सकते हैं, लेकिन सजावटी को प्राथमिकता का सम्मान करना चाहिए।
• will-change का अति प्रयोग मेमोरी को नुकसान पहुँचाता है।will-change गुण ब्राउज़र को पहले से तत्व को GPU-प्रमोट करने का संकेत देता है, जो एनिमेशन को सुचारू कर सकता है। लेकिन कई तत्वों में will-change जोड़ना महत्वपूर्ण GPU मेमोरी की खपत करता है। केवल उन तत्वों पर लागू करें जिन्हें आप वास्तव में एनिमेट करते हैं, आदर्श रूप से एनिमेशन शुरू होने से पहले JavaScript के माध्यम से जोड़ा गया और बाद में हटाया गया। पृष्ठ पर प्रत्येक तत्व पर will-change: transform सेट करना एंटीपैटर्न है।
• animation-fill-mode भ्रम।डिफ़ॉल्ट रूप से, एनिमेशन समाप्त होने के बाद एक तत्व अपनी मूल शैली पर वापस आ जाता है। एनिमेशन की अंतिम स्थिति रखने के लिए, animation-fill-mode: forwards का उपयोग करें। देरी बीतने से पहले तत्व को एनिमेशन की पहली स्थिति में शुरू करने के लिए, backwards का उपयोग करें। दोनों करने के लिए, both का उपयोग करें। कई «मेरा तत्व वापस क्यों स्नैप करता है?» बग इस संपत्ति को छोड़ देने से आते हैं। डिफ़ॉल्ट मान none है, जो शायद ही कभी एक-शॉट प्रवेश एनिमेशन के लिए आप चाहते हैं।
• अनंत एनिमेशन मोबाइल बैटरी सूखाते हैं।एक animation-iteration-count: infinite एनिमेशन हमेशा के लिए चलता है, GPU को सक्रिय रखता है और स्क्रीन रिफ्रेश दर को अधिकतम पर। मोबाइल डिवाइस पर, यह बैटरी को उल्लेखनीय रूप से सूखाता है। सजावटी निरंतर एनिमेशन (एक लोगो जो धीरे से सांस लेता है) के लिए, पृष्ठ छिपा होने पर एनिमेशन को रोकने पर विचार करें (document.visibilityState !== 'visible'), या पुनरावृत्ति गणना को अनंत के बजाय 3 से 5 जैसी सीमित संख्या तक सीमित करें।
• बड़े पैमाने पर कीफ़्रेम नामकरण संघर्ष।@keyframes नियम नाम स्टाइलशीट के भीतर वैश्विक हैं: एक फ़ाइल में @keyframes fade दूसरे में @keyframes fade से टकराता है। बड़े कोडबेस के लिए, अपने कीफ़्रेम नामों को नेमस्पेस करें (@keyframes app-fade-in, @keyframes hero-slide-up) मूक ओवरराइड से बचने के लिए। CSS मॉड्यूल और CSS-इन-JS पुस्तकालय स्कोप-हैशिंग के साथ स्वचालित रूप से इसे संभालते हैं।

गोपनीयता: सब कुछ आपके ब्राउज़र में चलता है

CSS जनरेटर उपकरण दो स्वादों में आते हैं: क्लाइंट-साइड JavaScript चलाने वाले सरल HTML पृष्ठ (निजी, तेज़) और क्लाउड संपादक जो आपकी परियोजनाओं को सहेजते हैं (सहयोगी लेकिन गोपनीयता ट्रेड-ऑफ के साथ)। यह उपकरण पहले प्रकार का है। आपके स्लाइडर मान, आपका चयनित प्रीसेट, आपका उत्पन्न CSS: सभी आपके ब्राउज़र सत्र में रहते हैं। पृष्ठ ताज़ा करें और स्थिति चली जाती है जब तक आपने पहले CSS कॉपी नहीं किया। कोई सर्वर आपकी एनिमेशन पसंद को संग्रहीत नहीं करता, कोई विश्लेषण ट्रैक नहीं करता कि आपने कौन से प्रीसेट परीक्षण किए, और कोई खाता आवश्यक नहीं है।

गोपनीयता संपत्ति मुख्य रूप से स्वामित्व डिज़ाइन कार्य के लिए मायने रखती है। एक स्टूडियो एक गोपनीय ग्राहक परियोजना के लिए एनिमेशन प्रोटोटाइप कर रहा है, एक डेवलपर एक अघोषित ऐप के माइक्रो-इंटरैक्शन पर काम कर रहा है, या एक डिज़ाइनर एक ब्रांड अभियान पर पुनरावृत्ति कर रहा है: कोई भी संदर्भ जहाँ पुनरावृत्ति इतिहास या प्रगति में डिज़ाइन काम के बारे में जानकारी लीक कर सकता है। इस उपकरण के साथ, कुछ भी कैप्चर नहीं किया गया है क्योंकि कुछ भी नहीं भेजा गया है। ब्राउज़र का नेटवर्क टैब खोलें और आप उपयोग के दौरान शून्य आउटबाउंड अनुरोध देखेंगे; केवल प्रारंभिक पृष्ठ लोड HTML और JavaScript प्राप्त करता है।

जब कोई दूसरा उपकरण सही विकल्प हो

• जटिल अनुक्रमित एनिमेशन के लिए GSAP।GreenSock Animation Platform (GSAP) समकालिक, अनुक्रमित, स्क्रबबल एनिमेशन को शुद्ध CSS से बहुत बेहतर संभालता है। स्टोरीबोर्ड मार्केटिंग एनिमेशन, रिवर्स क्षमता के साथ स्क्रॉल-लिंक्ड अनुक्रम, या JavaScript स्थिति परिवर्तनों पर निर्भर किसी भी चीज़ के लिए, GSAP उद्योग मानक है। अधिकांश उपयोग मामलों के लिए मुफ्त (कुछ प्लगइन्स के लिए क्लब लाइसेंस के साथ)।
• डिज़ाइनर-निर्मित एनिमेशन के लिए Lottie।Lottie (मूल रूप से Airbnb से) After Effects एनिमेशन को JSON के रूप में रेंडर करता है, डिज़ाइनरों को After Effects में जटिल गति बनाने और सीधे web/iOS/Android पर निर्यात करने की अनुमति देता है। उन एनिमेशन के लिए जो हाथ से कोडित कीफ़्रेम व्यावहारिक रूप से उत्पन्न कर सकते हैं उनसे अधिक हैं (चरित्र एनिमेशन, जटिल मॉर्फिंग, चित्रण अनुक्रम), Lottie की डिज़ाइन-टू-कोड पाइपलाइन मैनुअल CSS एनिमेशन पर जीतती है।
• JavaScript नियंत्रण के लिए Web Animations API।यदि आपको रनटाइम पर JavaScript से एनिमेशन शुरू करने, रोकने, उलटने या संशोधित करने की आवश्यकता है, तो Web Animations API (element.animate(keyframes, options)) CSS क्लासेस से जूझने की तुलना में अधिक एर्गोनोमिक है। .pause(), .play(), .reverse() जैसी विधियों और एक .finished Promise के साथ एक Animation ऑब्जेक्ट लौटाता है। मूल ब्राउज़र समर्थन, कोई पुस्तकालय आवश्यक नहीं।
• खेल लूप के लिए requestAnimationFrame।निरंतर JavaScript तर्क द्वारा संचालित एनिमेशन (खेल लूप, भौतिकी सिमुलेशन, रीयल-टाइम डेटा विज़ुअलाइज़ेशन) के लिए, मैनुअल प्रति-फ़्रेम गुण अपडेट के साथ requestAnimationFrame सही दृष्टिकोण है। CSS एनिमेशन घोषणात्मक और पूर्वनिर्धारित हैं; rAF आपको प्रति-फ़्रेम नियंत्रण देता है कि क्या अपडेट करना है। जब आपको पिक्सेल-स्तरीय नियंत्रण की भी आवश्यकता हो तो Canvas या WebGL का उपयोग करें।

अधिक अक्सर पूछे जाने वाले प्रश्न

मैं एक एनिमेशन को केवल एक बार चलाने के लिए कैसे बनाऊँ?

animation-iteration-count: 1 सेट करें (जो डिफ़ॉल्ट है यदि निर्दिष्ट नहीं है)। तत्व को एनिमेशन पूरा होने के बाद एनिमेशन की अंतिम स्थिति में रहने के लिए (मूल शैली में वापस स्नैप करने के बजाय), animation-fill-mode: forwards भी सेट करें। संयुक्त शॉर्टहैंड है animation: fadeIn 0.5s ease-out forwards;।

क्या मैं एनिमेशन को रोक और फिर से शुरू कर सकता हूँ?

हाँ, animation-play-state: paused (या running) के साथ। इस गुण को JavaScript के माध्यम से (जैसे, बटन क्लिक पर) या «होवर पर रोकें» पैटर्न के लिए CSS में :hover के माध्यम से टॉगल करें। एनिमेशन अपने वर्तमान बिंदु पर जम जाता है और जब चलने पर वापस सेट किया जाता है तो वहाँ से फिर से शुरू होता है, बिना प्रगति खोए। यह संक्रमणों में समान काम करता है लेकिन रनटाइम पॉज़ नियंत्रण के लिए केवल animation-play-state संपत्ति मौजूद है।

मैं क्लिक या स्क्रॉल पर एनिमेशन कैसे ट्रिगर करूँ?

क्लिक ट्रिगर्स के लिए, JavaScript के माध्यम से एक CSS क्लास टॉगल करें: element.classList.toggle('animate-in')। क्लास जोड़े जाने पर एनिमेशन चलता है। स्क्रॉल ट्रिगर्स के लिए, IntersectionObserver का उपयोग यह पता लगाने के लिए करें कि तत्व कब व्यूपोर्ट में प्रवेश करता है और फिर क्लास जोड़ें। आधुनिक ब्राउज़रों के लिए, CSS स्क्रॉल-संचालित एनिमेशन आपको animation-timeline: scroll() के माध्यम से JavaScript के बिना सीधे स्क्रॉल स्थिति पर एनिमेशन प्रगति को बाँधने देता है।

मेरा एनिमेशन क्यों झिलमिलाता या हकलाता है?

अधिकांश झिलमिलाहट/हकलाहट के मुद्दे ट्रांसफॉर्म-आधारित समकक्षों के बजाय लेआउट-ट्रिगरिंग गुणों (width, height, top/left) को एनिमेट करने से आते हैं। left: 0 को transform: translateX(0) पर स्विच करें और एनिमेशन सहज होना चाहिए। अन्य कारण: कई अर्ध-पारदर्शी परतों से ओवरड्रॉ, एक ही फ़्रेम में स्टाइल पढ़ने और लिखने वाले JavaScript से लेआउट थ्रैशिंग, या एनिमेटेड तत्व पर अत्यधिक छाया और फ़िल्टर।

क्या मुझे पहुँच-महत्वपूर्ण इंटरफेस पर एनिमेशन का उपयोग करना चाहिए?

उनका उपयोग करें, लेकिन prefers-reduced-motion का सम्मान करें। WCAG 2.1 दिशानिर्देश गैर-आवश्यक गति को अक्षम करने का विकल्प प्रदान करने की सलाह देते हैं। सजावटी एनिमेशन को @media (prefers-reduced-motion: no-preference) में लपेटें ताकि OS प्राथमिकता सेट करने वाले उपयोगकर्ता स्थिर अनुभव प्राप्त करें। आवश्यक प्रतिक्रिया एनिमेशन (लोडिंग संकेतक, त्रुटि हिलाव) रखे जा सकते हैं; पूरी तरह से सजावटी संवेदनशील उपयोगकर्ताओं के लिए ऑप्ट-इन होने चाहिए।

क्या मैं कस्टम ईज़िंग वक्रों के लिए cubic-bezier का उपयोग कर सकता हूँ?

हाँ। cubic-bezier(x1, y1, x2, y2) टाइमिंग फ़ंक्शन आपको दो नियंत्रण बिंदुओं के साथ किसी भी ईज़िंग वक्र को परिभाषित करने देता है। प्रत्येक x मान 0 और 1 के बीच होता है (समय का प्रतिनिधित्व करता है), y मान नकारात्मक या 1 से अधिक हो सकते हैं (ओवरशूट और बाउंस प्रभावों की अनुमति देते हुए)। एक वक्र को दृष्टिगत रूप से चुनने के लिए हमारे Cubic Bezier उपकरण या Lea Verou के क्लासिक cubic-bezier.com का उपयोग करें। सामान्य प्रीसेट विकल्प: ease, ease-in, ease-out, ease-in-out, और रैखिक-उपनाम CSS चर cubic-bezier(0.25, 0.1, 0.25, 1) (डिफ़ॉल्ट ease)।