CSS एनिमेशन गाइड: ट्रांज़िशन, कीफ़्रेम और प्रदर्शन

CSS एनिमेशन इंटरफ़ेस में जान डालते हैं, दृश्य प्रतिक्रिया प्रदान करते हैं, उपयोगकर्ता का ध्यान निर्देशित करते हैं और यादगार अनुभव बनाते हैं। अच्छी तरह से किए गए एनिमेशन प्राकृतिक और सहज लगते हैं; खराब तरीके से किए गए एनिमेशन जर्की होते हैं, ध्यान भटकाते हैं और शारीरिक असुविधा भी पैदा कर सकते हैं। यह मार्गदर्शिका ट्रांज़िशन और कीफ़्रेम की मूल बातों से लेकर उन्नत प्रदर्शन अनुकूलन और सुगमता तक सब कुछ कवर करती है, जो आपको सहज, उद्देश्यपूर्ण और समावेशी एनिमेशन बनाने का ज्ञान देती है।

CSS ट्रांज़िशन और एनिमेशन

CSS एनिमेशन बनाने के लिए दो अलग-अलग तंत्र प्रदान करता है: ट्रांज़िशन और एनिमेशन। CSS एनिमेशन के साथ प्रभावी ढंग से काम करने के लिए यह समझना मौलिक है कि प्रत्येक का उपयोग कब करना है।

CSS ट्रांज़िशन

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

.button {
  background: #3b82f6;
  transform: scale(1);
  transition: background 0.3s ease, transform 0.2s ease;
}

.button:hover {
  background: #2563eb;
  transform: scale(1.05);
}

ट्रांज़िशन सरल दो-स्थिति एनिमेशन के लिए आदर्श हैं। उन्हें न्यूनतम कोड की आवश्यकता होती है, समझने में आसान होते हैं और ब्राउज़रों में विश्वसनीय रूप से काम करते हैं। सीमा यह है कि वे केवल दो मानों के बीच एनिमेट करते हैं — आप मध्यवर्ती चरणों को परिभाषित नहीं कर सकते।

CSS एनिमेशन (कीफ़्रेम)

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

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pulse-element {
  animation: pulse 2s ease-in-out infinite;
}

कब किसका उपयोग करें

परिदृश्य	ट्रांज़िशन का उपयोग करें	एनिमेशन का उपयोग करें
होवर प्रभाव	हाँ	नहीं
फ़ोकस स्थिति	हाँ	नहीं
दृश्यता टॉगल करें	हाँ	संभवतः
बहु-चरणीय अनुक्रम	नहीं	हाँ
लूपिंग एनिमेशन	नहीं	हाँ
स्थिति से स्वतंत्र	नहीं	हाँ
प्रवेश एनिमेशन	संभवतः	हाँ

कीफ़्रेम सिंटैक्स की गहन समझ

@keyframes नियम CSS एनिमेशन का केंद्र है। इसके सिंटैक्स की पूरी समझ बहु-चरणीय एनिमेशन अनुक्रमों की पूरी शक्ति को अनलॉक करती है।

प्रतिशत-आधारित कीफ़्रेम

कीफ़्रेम 0% से 100% तक प्रतिशत मानों का उपयोग करके परिभाषित किए जाते हैं, जो एनिमेशन टाइमलाइन पर प्रगति दर्शाते हैं। आप जितने चाहें उतने कीफ़्रेम परिभाषित कर सकते हैं, और ब्राउज़र उनके बीच इंटरपोलेट करता है:

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-10px);
  }
}

एकाधिक कीफ़्रेम कॉमा-पृथक प्रतिशत मानों के माध्यम से एक ही स्टाइल ब्लॉक साझा कर सकते हैं, जैसे ऊपर के उदाहरण में 0%, 100%। यह उन एनिमेशन के लिए उपयोगी है जो प्रारंभिक स्थिति में लौटते हैं।

एनिमेशन शॉर्टहैंड प्रॉपर्टी

animation शॉर्टहैंड प्रॉपर्टी आठ उप-प्रॉपर्टी को एक घोषणा में संयोजित करती है। क्रम है: name, duration, timing-function, delay, iteration-count, direction, fill-mode और play-state।

.element {
  animation: slideIn 0.5s ease-out 0.2s 1 forwards running;
}

/* Equivalent longhand */
.element {
  animation-name: slideIn;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

एनिमेशन फ़िल मोड

animation-fill-mode प्रॉपर्टी नियंत्रित करती है कि एनिमेशन चलने से पहले और बाद में कौन सी स्टाइल लागू होती हैं। यह सबसे अधिक गलत समझी जाने वाली एनिमेशन प्रॉपर्टी में से एक है:

none (डिफ़ॉल्ट): एनिमेशन समाप्त होने पर तत्व एनिमेशन से पहले की स्टाइल पर लौट आता है।
forwards: एनिमेशन समाप्त होने के बाद तत्व अंतिम कीफ़्रेम की स्टाइल बनाए रखता है। प्रवेश एनिमेशन के लिए महत्वपूर्ण जहाँ आप चाहते हैं कि तत्व अंतिम स्थिति में रहे।
backwards: एनिमेशन विलंब के दौरान (एनिमेशन शुरू होने से पहले), तत्व पहले कीफ़्रेम की स्टाइल लागू करता है।
both: forwards और backwards व्यवहार को जोड़ता है। तत्व विलंब के दौरान पहला कीफ़्रेम दिखाता है और पूरा होने पर अंतिम कीफ़्रेम बनाए रखता है।

ईज़िंग फ़ंक्शन

ईज़िंग फ़ंक्शन (जिन्हें टाइमिंग फ़ंक्शन भी कहा जाता है) एनिमेशन के त्वरण वक्र को परिभाषित करते हैं। वे निर्धारित करते हैं कि एनिमेशन धीरे शुरू होकर तेज़ होता है, तेज़ शुरू होकर धीमा होता है, या अधिक जटिल पैटर्न का पालन करता है। सही ईज़िंग फ़ंक्शन एनिमेशन को प्राकृतिक बनाता है; गलत ईज़िंग फ़ंक्शन एनिमेशन को यांत्रिक या अचानक बनाता है।

बिल्ट-इन ईज़िंग फ़ंक्शन

linear: पूरे एनिमेशन में स्थिर गति। शायद ही कभी प्राकृतिक लगता है क्योंकि वास्तविक दुनिया की वस्तुएँ स्थिर गति से नहीं चलतीं। यांत्रिक या घूर्णन एनिमेशन के लिए उपयुक्त।
ease (डिफ़ॉल्ट): धीरे शुरू, मध्य में तेज़, अंत में धीमा। अधिकांश UI ट्रांज़िशन के लिए अच्छा सामान्य-उद्देश्य ईज़िंग।
ease-in: धीरे शुरू फिर तेज़। 'गति बनाने' का एहसास बनाता है। स्क्रीन छोड़ने या गिरने वाले तत्वों के लिए उपयुक्त।
ease-out: तेज़ शुरू फिर धीमा। 'स्थान पर आने' का एहसास बनाता है। UI तत्वों के स्क्रीन में प्रवेश करने के लिए सबसे अधिक उपयोग किया जाने वाला ईज़िंग।
ease-in-out: धीमी शुरुआत और अंत, मध्य में तेज़। ease के समान लेकिन अधिक स्पष्ट त्वरण और मंदी के साथ। बड़े, अधिक नाटकीय ट्रांज़िशन के लिए उपयुक्त।

क्यूबिक बेज़ियर कर्व

cubic-bezier() फ़ंक्शन आपको सटीक नियंत्रण के साथ कस्टम ईज़िंग कर्व परिभाषित करने देता है। यह क्यूबिक बेज़ियर कर्व के नियंत्रण बिंदुओं को दर्शाने वाले चार पैरामीटर स्वीकार करता है: cubic-bezier(x1, y1, x2, y2)। x मान समय (0 से 1) दर्शाते हैं, y मान प्रगति दर्शाते हैं (ओवरशूट प्रभाव के लिए 0-1 से बाहर जा सकते हैं)।

.element {
  /* Smooth deceleration - great for entrances */
  transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1.0);

  /* Smooth acceleration - great for exits */
  transition: transform 0.2s cubic-bezier(0.4, 0.0, 1, 1);

  /* Material Design standard easing */
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

स्टेप फ़ंक्शन

steps() फ़ंक्शन सहज इंटरपोलेशन के बजाय असतत फ़्रेम-दर-फ़्रेम एनिमेशन बनाता है। यह स्प्राइट एनिमेशन या 'टाइपिंग' प्रभाव बनाने के लिए उपयोगी है:

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

.typing-effect {
  animation: typing 3s steps(40, end);
  overflow: hidden;
  white-space: nowrap;
}

प्रदर्शन अनुकूलन

सहज एनिमेशन के लिए 60 फ़्रेम प्रति सेकंड (fps) की आवश्यकता होती है, जिसका अर्थ है कि प्रत्येक फ़्रेम 16.67 मिलीसेकंड के भीतर पूरा होना चाहिए। इस बजट को पूरा करने में विफलता दृश्यमान जर्क — स्क्रीन झटके, छूटे हुए फ़्रेम और खराब उपयोगकर्ता अनुभव का कारण बनती है। उच्च-प्रदर्शन एनिमेशन लिखने के लिए ब्राउज़र रेंडरिंग पाइपलाइन को समझना महत्वपूर्ण है।

रेंडरिंग पाइपलाइन

जब कोई CSS प्रॉपर्टी बदलती है, तो ब्राउज़र डिस्प्ले को अपडेट करने के लिए अधिकतम तीन चरणों से गुज़रता है:

स्टाइल: निर्धारित करता है कि कौन से CSS नियम किन तत्वों पर लागू होते हैं।
लेआउट: प्रत्येक तत्व के आकार और स्थिति की गणना करता है। width, height, margin, padding, top, left, font-size और अन्य ज्यामितीय प्रॉपर्टी में परिवर्तन से ट्रिगर होता है।
पेंट: प्रत्येक तत्व के लिए पिक्सेल भरता है। color, background, box-shadow, border-radius और अन्य दृश्य प्रॉपर्टी में परिवर्तन से ट्रिगर होता है।
कंपोज़िट: पेंट की गई लेयरों को सही क्रम में संयोजित करता है। केवल यह चरण GPU पर चलता है। transform और opacity में परिवर्तन से ट्रिगर होता है।

केवल कंपोज़िट चरण को ट्रिगर करने वाले एनिमेशन सबसे अच्छा प्रदर्शन करते हैं क्योंकि वे लेआउट और पेंट को पूरी तरह से छोड़ देते हैं। यही कारण है कि transform और opacity उच्च-प्रदर्शन CSS एनिमेशन के लिए स्वर्ण मानक हैं।

केवल कंपोज़िटर प्रॉपर्टी

प्रॉपर्टी	लेआउट ट्रिगर करता है?	पेंट ट्रिगर करता है?	GPU कंपोज़िट?
transform	नहीं	नहीं	हाँ
opacity	नहीं	नहीं	हाँ
filter	नहीं	हाँ	कभी-कभी
top / left	हाँ	हाँ	नहीं
width / height	हाँ	हाँ	नहीं
margin / padding	हाँ	हाँ	नहीं
background-color	नहीं	हाँ	नहीं
box-shadow	नहीं	हाँ	नहीं

will-change का उपयोग करना

will-change प्रॉपर्टी ब्राउज़र को बताती है कि कौन सी प्रॉपर्टी बदलने की उम्मीद है, जिससे वह तत्व को अपनी कंपोज़िटर लेयर में प्रमोट करके पहले से अनुकूलन कर सके। हालाँकि, इसका उपयोग सावधानी से किया जाना चाहिए:

/* Apply will-change just before the animation */
.element:hover {
  will-change: transform;
}

/* Remove it after the animation completes */
.element {
  transition: transform 0.3s ease;
}

will-change की सामान्य गलतियों में इसे बहुत सारे तत्वों पर लागू करना (प्रत्येक कंपोज़िटर लेयर GPU मेमोरी खपत करती है) और इसे स्थायी रूप से रखना (संसाधन बर्बाद करना) शामिल है। अच्छा अभ्यास है एनिमेशन शुरू होने से पहले JavaScript के माध्यम से will-change जोड़ना और एनिमेशन समाप्त होने पर इसे हटाना।

लेआउट प्रॉपर्टी के बजाय Transform का उपयोग करें

सबसे प्रभावी प्रदर्शन अनुकूलन लेआउट-ट्रिगर करने वाली प्रॉपर्टी को transform से बदलना है:

left: 100px के बजाय transform: translateX(100px) का उपयोग करें
top: 50px के बजाय transform: translateY(50px) का उपयोग करें
width: 150%; height: 150% के बजाय transform: scale(1.5) का उपयोग करें
लेआउट के माध्यम से घुमाने के बजाय transform: rotate(45deg) का उपयोग करें

प्रदर्शन नियम: यदि आप transform या opacity के साथ समान दृश्य प्रभाव प्राप्त कर सकते हैं, तो हमेशा लेआउट या पेंट ट्रिगर करने वाली प्रॉपर्टी के बजाय इन्हें प्राथमिकता दें। यह सिद्धांत अधिकांश एनिमेशन प्रदर्शन समस्याओं को समाप्त करता है।

सामान्य एनिमेशन पैटर्न

कुछ एनिमेशन पैटर्न वेब इंटरफ़ेस में बार-बार दिखाई देते हैं। इन पैटर्न में महारत हासिल करना आपको अधिकांश सामान्य UI एनिमेशन आवश्यकताओं के लिए एक टूलकिट प्रदान करता है।

1. फ़ेड इन

सबसे सरल और सबसे बहुमुखी प्रवेश एनिमेशन। तत्व पारदर्शी से अपारदर्शी में ट्रांज़िशन करता है:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

2. स्लाइड अप और फ़ेड इन

एक अधिक गतिशील प्रवेश प्रभाव जो ऊर्ध्वाधर गति और पारदर्शिता परिवर्तन को जोड़ता है। यह तत्वों के नीचे से आने का एहसास बनाता है:

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUpFade 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

3. होवर स्केल

होवर पर सूक्ष्म स्केल वृद्धि संतोषजनक इंटरैक्शन प्रतिक्रिया प्रदान करती है:

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

4. स्टैगर्ड सूची एनिमेशन

जब आइटमों की सूची दिखाई देती है, तो प्रत्येक आइटम के लिए स्टैगर्ड एनिमेशन विलंब सेट करना एक कैस्केडिंग प्रभाव बनाता है जो आँख का मार्गदर्शन करता है:

.list-item {
  opacity: 0;
  transform: translateY(10px);
  animation: slideUpFade 0.3s ease-out forwards;
}

.list-item:nth-child(1) { animation-delay: 0.0s; }
.list-item:nth-child(2) { animation-delay: 0.05s; }
.list-item:nth-child(3) { animation-delay: 0.1s; }
.list-item:nth-child(4) { animation-delay: 0.15s; }
.list-item:nth-child(5) { animation-delay: 0.2s; }

गतिशील सूचियों के लिए, प्रत्येक आइटम के इंडेक्स के आधार पर animation-delay सेट करने के लिए JavaScript का उपयोग करें, या CSS कस्टम प्रॉपर्टी का उपयोग करें: style="animation-delay: calc(var(--i) * 0.05s)"।

5. लोडिंग स्पिनर

सहज निरंतर घुमाव एक क्लासिक लोडिंग इंडिकेटर है:

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

एनिमेशन सुगमता: prefers-reduced-motion

सभी उपयोगकर्ता एनिमेशन से लाभान्वित नहीं होते। वेस्टिबुलर विकार, गति संवेदनशीलता या कुछ संज्ञानात्मक स्थितियों वाले लोगों के लिए, एनिमेशन चक्कर, मतली या दौरे का कारण बन सकते हैं। prefers-reduced-motion मीडिया क्वेरी आपको उपयोगकर्ता की सिस्टम-स्तरीय कम एनिमेशन प्राथमिकता का सम्मान करने की अनुमति देती है।

कम एनिमेशन लागू करना

अनुशंसित दृष्टिकोण है कि एनिमेशन केवल उन उपयोगकर्ताओं के लिए सक्षम हों जिन्होंने कम एनिमेशन प्राथमिकता सेट नहीं की है:

/* Default: no animation for users who prefer reduced motion */
.element {
  opacity: 1;
  transform: none;
}

/* Only animate for users who have no motion preference */
@media (prefers-reduced-motion: no-preference) {
  .element {
    animation: slideUpFade 0.5s ease-out forwards;
  }
}

वैकल्पिक रूप से, आप कम एनिमेशन पसंद करने वाले उपयोगकर्ताओं के लिए विशिष्ट एनिमेशन अक्षम कर सकते हैं:

.element {
  animation: slideUpFade 0.5s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Keep functional transitions but shorten duration */
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

क्या रखें और क्या हटाएँ

जब उपयोगकर्ता कम एनिमेशन पसंद करते हैं, तो सभी एनिमेशन नहीं हटाए जाने चाहिए। अर्थ या स्थिति बताने वाले कार्यात्मक एनिमेशन को बनाए रखा जाना चाहिए, बस सरलीकृत किया जाना चाहिए:

हटाएँ: सजावटी एनिमेशन, पैरालैक्स स्क्रॉलिंग, ऑटो-प्ले कैरोसेल, पल्स प्रभाव और लूपिंग पृष्ठभूमि एनिमेशन।
सरलीकृत करें: ट्रांज़िशन अवधि को पूरी तरह हटाने के बजाय लगभग तत्काल (0.01ms) तक छोटा करें ताकि स्थिति परिवर्तन अभी भी बोधगम्य रहे।
बनाए रखें: कार्यात्मक स्थिति ट्रांज़िशन (होवर, फ़ोकस, सक्रिय स्थिति), प्रगति संकेतक और कोई भी एनिमेशन जो महत्वपूर्ण जानकारी देता है।

एनिमेशन लाइब्रेरी

जबकि CSS एनिमेशन अधिकांश UI आवश्यकताओं को संभालता है, JavaScript एनिमेशन लाइब्रेरी भौतिकी-आधारित गति, स्क्रॉल-लिंक्ड एनिमेशन और जटिल अनुक्रमों के ऑर्केस्ट्रेशन जैसी उन्नत सुविधाएँ प्रदान करती हैं।

CSS-प्रथम लाइब्रेरी

Animate.css: पूर्व-निर्मित CSS एनिमेशन क्लास का संग्रह। एनिमेशन लागू करने के लिए बस तत्व में क्लास नाम जोड़ें। त्वरित प्रोटोटाइपिंग के लिए अच्छा, लेकिन अत्यधिक उपयोग से एक जैसे दिखने वाले एनिमेशन हो सकते हैं।
Hamburgers: एनिमेटेड हैमबर्गर मेनू आइकन ट्रांज़िशन का संग्रह, सभी शुद्ध CSS में कार्यान्वित।

JavaScript एनिमेशन लाइब्रेरी

Framer Motion: React एनिमेशन लाइब्रेरी जो घोषणात्मक एनिमेशन API, स्प्रिंग भौतिकी, लेआउट एनिमेशन और जेस्चर समर्थन प्रदान करती है। React एप्लिकेशन के लिए शीर्ष विकल्प।
GSAP (GreenSock): सबसे शक्तिशाली JavaScript एनिमेशन लाइब्रेरी। सटीक टाइमलाइन नियंत्रण, जटिल ईज़िंग, SVG मॉर्फिंग और स्क्रॉल-ट्रिगर एनिमेशन प्रदान करता है। मार्केटिंग वेबसाइटों और इंटरैक्टिव अनुभवों के लिए बड़े ब्रांडों द्वारा उपयोग किया जाता है।
Anime.js: साफ API के साथ हल्का JavaScript एनिमेशन लाइब्रेरी। CSS प्रॉपर्टी, SVG, DOM विशेषताएँ और JavaScript ऑब्जेक्ट का समर्थन करता है। CSS और GSAP के बीच अच्छा मध्य-मार्ग विकल्प।
Motion One: Web Animations API पर निर्मित आधुनिक हल्का एनिमेशन लाइब्रेरी। न्यूनतम API, स्प्रिंग भौतिकी और टाइमलाइन प्रदान करता है।

JavaScript बनाम CSS का उपयोग कब करें

CSS स्थिति परिवर्तनों की प्रतिक्रिया में सरल घोषणात्मक एनिमेशन के लिए। JavaScript का उपयोग करें: भौतिकी-आधारित गति (स्प्रिंग, मोमेंटम), स्क्रॉल-लिंक्ड एनिमेशन, सटीक समय नियंत्रण वाले जटिल अनुक्रम, रनटाइम पर गणना किए गए गतिशील एनिमेशन पैरामीटर, या ऐसे एनिमेशन जिन्हें प्रोग्रामेटिक रूप से रोकने, उलटने या खींचने की आवश्यकता होती है।

एनिमेशन डीबग करना

एनिमेशन बग सूक्ष्म और निदान करने में कठिन हो सकते हैं। उचित डीबगिंग टूल और तकनीकें प्रक्रिया को अधिक कुशल बनाती हैं।

Chrome DevTools एनिमेशन पैनल

Chrome DevTools में एक समर्पित एनिमेशन पैनल शामिल है जो शक्तिशाली डीबगिंग क्षमताएँ प्रदान करता है:

टाइमलाइन दृश्य: पेज पर सभी सक्रिय एनिमेशन को उनकी अवधि, विलंब और कीफ़्रेम के साथ देखें।
प्लेबैक नियंत्रण: एनिमेशन को 1/4 गति पर धीमा करें, रोकें या फ़्रेम-दर-फ़्रेम टाइमलाइन खींचें।
प्रॉपर्टी निरीक्षण: एनिमेट की जा रही सटीक CSS प्रॉपर्टी और प्रत्येक कीफ़्रेम पर उनके मान देखने के लिए टाइमलाइन में एनिमेशन पर क्लिक करें।
लाइव संपादन: पेज को रीलोड किए बिना एनिमेशन अवधि, विलंब और ईज़िंग को लाइव संशोधित करें।

प्रदर्शन विश्लेषण

एनिमेशन जर्क की पहचान करने के लिए Chrome DevTools में Performance पैनल का उपयोग करें:

एनिमेशन चलने के दौरान प्रदर्शन ट्रेस रिकॉर्ड करें
16.67ms बजट से अधिक फ़्रेम खोजें (फ़्रेम चार्ट में लाल बार के रूप में दिखाए गए)
जाँचें कि एनिमेशन फ़्रेम में 'Layout' ऑपरेशन तो नहीं है, जो लेआउट-ट्रिगर करने वाली प्रॉपर्टी को इंगित करता है
पेंट फ़्लैशिंग (हरे रंग में पुनः पेंट क्षेत्र दिखाता है) और लेयर बॉर्डर (कंपोज़िटर लेयर दिखाता है) सक्षम करने के लिए 'Rendering' टैब का उपयोग करें

सामान्य डीबगिंग परिदृश्य

एनिमेशन नहीं चल रहा: जाँचें कि animation-fill-mode सही ढंग से सेट है या नहीं। forwards या both के बिना, तत्व एनिमेशन-पूर्व स्थिति में लौट आता है। यह भी सत्यापित करें कि तत्व का सही आकार है — transform: scale(0) तत्व को अदृश्य बनाता है लेकिन यह अभी भी मौजूद रहता है।
एनिमेशन जर्की है: लंबे फ़्रेम खोजने के लिए Performance पैनल खोलें। जाँचें कि क्या आप लेआउट-ट्रिगर करने वाली प्रॉपर्टी एनिमेट कर रहे हैं। transform और opacity पर स्विच करें।
एनिमेशन विलंब अजीब लगता है: याद रखें कि animation-delay एनिमेशन शुरू होने से पहले एक अंतराल बनाता है। इस अंतराल के दौरान, जब तक animation-fill-mode: backwards या both सेट न हो, तत्व एनिमेशन-पूर्व स्थिति दिखाता है।
एनिमेशन Chrome में काम करता है लेकिन Safari में नहीं: Safari animation शॉर्टहैंड को अधिक सख्ती से पार्स करता है। सुनिश्चित करें कि सभी मान सही क्रम में हैं और कोई असमर्थित सुविधा का उपयोग नहीं किया गया है।

CSS का उपयोग कर रहे हैं? उत्पादन के लिए अपनी स्टाइलशीट को फ़ॉर्मेट, संपीड़ित और अनुकूलित करने के लिए हमारे मुफ़्त CSS टूल आज़माएँ।

CSS फ़ॉर्मेटर CSS मिनिफ़ायर

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

CSS ट्रांज़िशन या CSS एनिमेशन का उपयोग करना चाहिए?

CSS ट्रांज़िशन का उपयोग बिंदु A से बिंदु B तक सरल स्थिति परिवर्तनों जैसे होवर प्रभाव, फ़ोकस स्थिति और दृश्यता टॉगल के लिए करें। CSS एनिमेशन (कीफ़्रेम) का उपयोग जटिल बहु-चरणीय अनुक्रमों, लूपिंग एनिमेशन या स्थिति परिवर्तनों से स्वतंत्र रूप से चलने वाले एनिमेशन के लिए करें। ट्रांज़िशन सरल हैं; एनिमेशन अधिक नियंत्रण प्रदान करते हैं।

प्रदर्शन के लिए कौन सी CSS प्रॉपर्टी एनिमेट करना सुरक्षित है?

एनिमेशन प्रदर्शन के लिए सबसे अच्छी प्रॉपर्टी transform और opacity हैं क्योंकि इन्हें पूरी तरह से GPU कंपोज़िटर द्वारा संभाला जा सकता है, बिना लेआउट या पेंट ट्रिगर किए। width, height, margin और top जैसी अन्य प्रॉपर्टी लेआउट पुनर्गणना ट्रिगर करती हैं, जो महंगी है। हमेशा left के बजाय transform: translateX() और width/height परिवर्तनों के बजाय transform: scale() का उपयोग करें।

एनिमेशन-संवेदनशील उपयोगकर्ताओं के लिए सुगमता कैसे प्रदान करें?

उन उपयोगकर्ताओं के लिए एनिमेशन अक्षम या सरल करने के लिए prefers-reduced-motion मीडिया क्वेरी का उपयोग करें जिन्होंने अपने ऑपरेटिंग सिस्टम में 'कम एनिमेशन' सेटिंग सक्षम की है। गैर-आवश्यक एनिमेशन को @media (prefers-reduced-motion: no-preference) में लपेटें, और कम एनिमेशन पसंद करने वाले उपयोगकर्ताओं के लिए फ़ॉलबैक के रूप में तत्काल स्थिति परिवर्तन प्रदान करें।

will-change क्या है और इसका उपयोग कब करना चाहिए?

will-change एक CSS प्रॉपर्टी है जो ब्राउज़र को संकेत देती है कि भविष्य में कौन सी प्रॉपर्टी बदलेंगी, जिससे वह पहले से अनुकूलन कर सके। सावधानी से उपयोग करें, केवल तब जब प्रदर्शन समस्याएँ देखी जाएँ। एनिमेशन शुरू होने से पहले लागू करें और समाप्त होने पर हटा दें। will-change का अत्यधिक उपयोग GPU मेमोरी बर्बाद करता है और वास्तव में प्रदर्शन को नुकसान पहुँचा सकता है।

CSS एनिमेशन कैसे डीबग करें?

Chrome DevTools शक्तिशाली एनिमेशन डीबगिंग टूल प्रदान करता है। सभी सक्रिय एनिमेशन देखने, टाइमलाइन को खींचने, अवधि और विलंब को लाइव संशोधित करने और एनिमेशन को 1/4 गति पर धीमा करने के लिए एनिमेशन पैनल (अधिक टूल मेनू में) खोलें। आप एनिमेशन जर्क और लेआउट थ्रैशिंग की पहचान करने के लिए Performance पैनल का भी उपयोग कर सकते हैं।