CSS से SVG एनिमेट कैसे करें: उदाहरणों के साथ व्यावहारिक गाइड

जब फ़ॉर्म सबमिट करने के बाद कोई चेकमार्क ख़ुद-ब-ख़ुद बनता है, या पेज लोड होते समय कोई लोगो अपनी रूपरेखा खींचता है, तो एक छोटी सी ख़ुशी होती है। यह सधा हुआ और जीवंत लगता है, और आम तौर पर इसमें CSS की बस कुछ लाइनें लगती हैं। फिर भी, पहली बार आज़माने पर कई लोगों को नतीजा उलझा देता है: आकृति कोने के किसी बिंदु के चारों ओर घूमती है, "draw" इफ़ेक्ट कुछ नहीं करता, या एनिमेशन एक आइकन पर ठीक और अगले पर पूरी तरह ग़लत दिखता है।

यह गाइड बताती है कि CSS से SVG एनिमेशन असल में कैसे काम करता है, कॉपी करने लायक़ छोटे उदाहरणों के साथ, वे उलझनें जिनमें लगभग सब फँसते हैं, और उन लोगों के लिए मोशन को सुलभ कैसे रखें जिन्हें यह असहज लगता है।

CSS से SVG एनिमेट क्यों करें?

SVG ग्राफ़िक कोड में बताई गई आकृतियों से बने होते हैं, जो उन्हें एनिमेशन के लिए आदर्श बनाता है:

• ये हर साइज़ पर और हर स्क्रीन पर तीखे रहते हैं।
• ये बहुत छोटे होते हैं GIF या वीडियो के मुक़ाबले।
• हर हिस्सा अलग से हिल सकता है, क्योंकि हर path या circle अपना अलग एलिमेंट है।
• CSS एनिमेशन व्यापक रूप से सपोर्टेड और कुशल है, ख़ासकर transform और opacity के लिए।

HTML के लिए इस्तेमाल होने वाले वही keyframes और animation properties SVG पर भी काम करते हैं, कुछ ज़रूरी फ़र्क़ों के साथ जो नीचे बताए गए हैं।

बुनियादी पैटर्न

एनिमेशन के दो हिस्से होते हैं: बदलाव बताने वाले keyframes, और उन्हें किसी एलिमेंट पर लागू करने वाला animation नियम।

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

.icon-heart {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 1.6s ease-in-out infinite;
}

यह class अपने inline SVG के अंदर किसी एलिमेंट पर लगाएँ, और वह धीरे-धीरे धड़कने लगता है। transform-box वाली लाइन पर ध्यान दें; SVG एनिमेशन की सबसे आम समस्या की कुंजी यही है।

उलझन 1: आकृतियाँ ग़लत बिंदु के चारों ओर घूमती हैं

HTML में transform-origin: center का मतलब है एलिमेंट का केंद्र। SVG के अंदर, डिफ़ॉल्ट रूप से यह SVG के अपने coordinate system को दर्शाता है, जो अक्सर उसका ऊपरी-बायाँ कोना होता है। इसलिए घूमता गियर अपनी जगह घूमने के बजाय ड्रॉइंग के कोने के चारों ओर चक्कर लगाता है।

इसका हल है transform-box: fill-box, जो origin को एलिमेंट के अपने bounding box के हिसाब से कर देता है। इसे हर उस एलिमेंट पर जोड़ें जिसे आप घुमाते या स्केल करते हैं, और transform-origin: center वैसा ही बर्ताव करेगा जैसी आप उम्मीद करते हैं।

उलझन 2: लाइन ड्रॉइंग इफ़ेक्ट

"ख़ुद-ब-ख़ुद बनने वाला" इफ़ेक्ट दो stroke properties इस्तेमाल करता है:

• stroke-dasharray रूपरेखा को तय लंबाई के डैश में बदल देता है।
• stroke-dashoffset यह खिसकाता है कि डैश पैटर्न कहाँ से शुरू हो।

अगर एक डैश पूरे path जितना लंबा हो, और आप उसे उतनी ही लंबाई से offset करें, तो लाइन पूरी तरह छिप जाती है। offset को शून्य तक एनिमेट करने पर वह बनती जाती है। पारंपरिक समस्या यह जानना है कि path कितना लंबा है। एक सधी हुई तरकीब मापने की ज़रूरत ही ख़त्म कर देती है: path पर pathLength="1" सेट करें, और ब्राउज़र उसकी लंबाई को 1 मान लेता है।

<path d="M40 62 L54 76 L82 44" pathLength="1" class="check" />

.check {
  fill: none;
  stroke: #178a66;
  stroke-width: 8;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.8s ease-out forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

दो बातें याद रखें: यह इफ़ेक्ट stroke को एनिमेट करता है, इसलिए जिन आकृतियों में सिर्फ़ fill है वे बनती हुई नहीं दिखेंगी; और forwards एनिमेशन ख़त्म होने के बाद पूरी बनी लाइन को दिखता रखता है।

उलझन 3: img टैग में लगे SVG को आपके पेज से स्टाइल नहीं किया जा सकता

आपकी स्टाइलशीट की CSS सिर्फ़ उस SVG तक पहुँच सकती है जो inline हो, यानी सीधे HTML में लिखा हो। अगर SVG img टैग से या CSS बैकग्राउंड के रूप में लोड होता है, तो आपके पेज की स्टाइल उसके अंदर तक नहीं पहुँच सकतीं। ऐसे में एनिमेशन स्टाइल SVG फ़ाइल के अंदर ही, एक style एलिमेंट में रखें। अपने आप में पूरा (self-contained) एनिमेटेड SVG एक्सपोर्ट ठीक यही करता है।

पाँच इफ़ेक्ट जो जानने लायक़ हैं

Transform और opacity सबसे स्मूद एनिमेट होते हैं, क्योंकि ब्राउज़र उन्हें बहुत कुशलता से संभाल सकते हैं। बड़े ग्राफ़िक पर blur filter जैसी चीज़ें एनिमेट करना ज़्यादा भारी पड़ता है, इसलिए उनका इस्तेमाल कम करें।

एक-एक करके दिखाना (staggered reveal)

कुछ सबसे अच्छे इफ़ेक्ट हिस्सों को एक के बाद एक एनिमेट करने से आते हैं: लोडर के लिए बारी-बारी धड़कते तीन बिंदु, या क्रम से दिखते इलस्ट्रेशन के टुकड़े। हर एलिमेंट को बढ़ती देरी के साथ एक ही एनिमेशन दें:

.dot { animation: pulse 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dot:nth-child(2) { animation-delay: 0.15s; }
.dot:nth-child(3) { animation-delay: 0.30s; }

0.1 से 0.2 सेकंड का अंतर आम तौर पर स्वाभाविक लगता है। इससे बहुत ज़्यादा हो तो यह धीमा लगने लगता है।

ट्रिगर: अपने आप, hover, click और load

• अपने आप और लगातार लोडर और माहौल वाले मोशन के लिए ठीक है, लेकिन कंटेंट पेजों पर इसका इस्तेमाल कम करें।
• Hover पर आइकन और बटन के लिए अच्छा काम करता है: animation नियम को :hover selector में लपेटें।
• Click पर के लिए थोड़ी सी JavaScript चाहिए जो एनिमेशन शुरू करने वाली class जोड़े।
• Load पर एक बार लोगो दिखाने और सफलता की स्थितियों के लिए आदर्श है: forwards के साथ एक iteration।

कम मोशन की पसंद का सम्मान करें

कुछ लोगों को एनिमेशन से चक्कर, मितली या ध्यान भटकने की समस्या होती है, और वे अपने ऑपरेटिंग सिस्टम से मोशन कम करने को कह सकते हैं। उस पसंद का सम्मान करें:

@media (prefers-reduced-motion: reduce) {
  .animated-svg,
  .animated-svg * {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}

डैश offset को शून्य करने का मतलब है कि लाइन ड्रॉइंग तब भी पूरी बनी हुई दिखती हैं, अदृश्य नहीं रहतीं।

एनिमेशन को देखकर बनाना

Keyframes हाथ से लिखना सीखने का बढ़िया तरीक़ा है, लेकिन नंबर बदलकर और रिफ़्रेश करके टाइमिंग ठीक करना धीमा हो जाता है। SVG Animation Generator से आप SVG लोड कर सकते हैं, 15 इफ़ेक्ट में से चुन सकते हैं, पूरे ग्राफ़िक को या हर एलिमेंट को अंतराल के साथ एनिमेट कर सकते हैं, और लाइव प्रीव्यू के साथ अवधि, easing, दिशा, origin और ट्रिगर बदल सकते हैं। यह सादी CSS, अपने आप में पूरा एनिमेटेड SVG, या React कंपोनेंट एक्सपोर्ट करता है, reduced-motion नियम अपने आप जोड़ता है, और प्रीव्यू से पहले अपलोड किए SVG से स्क्रिप्ट हटा देता है।

अगर पहले आकृतियाँ ही बदलनी हैं, तो SVG Path Editor path डेटा में मदद करता है, और SVG के बजाय HTML एलिमेंट एनिमेट करने के लिए CSS Animation Generator यही विचार कवर करता है।

इसे तेज़ और मक़सद वाला रखें

• किसी वजह से एनिमेट करें: प्रतिक्रिया, मार्गदर्शन या ख़ुशी का एक पल, लगातार हलचल नहीं।
• अवधि छोटी रखें इंटरफ़ेस की प्रतिक्रिया के लिए, लगभग 200 से 600 मिलीसेकंड।
• Transform और opacity को प्राथमिकता दें स्मूदनेस के लिए।
• SVG को ऑप्टिमाइज़ करें एनिमेट करने से पहले; कम एलिमेंट वाली छोटी फ़ाइलें एनिमेट करने में आसान और लोड होने में तेज़ होती हैं।

एनिमेशन इस पर भी असर डालता है कि लोड होते समय पेज कैसा लगता है। अगर आपका हीरो ग्राफ़िक बड़ा है, तो Core Web Vitals की हमारी गाइड बताती है कि उसे मुख्य कंटेंट को धीमा करने से कैसे रोकें, और अगर आप किसी डिज़ाइन मॉकअप में मोशन जोड़ रहे हैं, तो placeholder इमेज गाइड बताती है कि एसेट तैयार होने तक लेआउट को स्थिर कैसे रखें।

छोटे से शुरू करें: अपनी साइट का एक आइकन लें, उसे load पर एक बार ख़ुद-ब-ख़ुद बनने दें, और reduced-motion नियम जोड़ें। यह दो मिनट का बदलाव है, और यह उस तरह की बारीकी है जिसे विज़िटर बिना ठीक-ठीक समझे महसूस करते हैं।