वेबसाइट में एनिमेशन कैसे जोड़ें (HTML, CSS, JS)

CSS, JavaScript या एनिमेशन फ़ाइल: क्या इस्तेमाल करें?

टूल देखकर नहीं, काम देखकर चुनें। हर विकल्प की अपनी साफ़ जगह है:

CSS और Web Animations API को लोड करने का कोई खर्च नहीं, क्योंकि ब्राउज़र में ये पहले से मौजूद हैं। वीडियो, Lottie और Rive में से हर एक एक फ़ाइल जोड़ता है, और Lottie व Rive एक player script भी। यह खर्च तब सही है जब मोशन किसी डिज़ाइनर ने बनाया हो, न कि code में लिखा गया हो। अगर आपको सिर्फ़ spinner या fade चाहिए, तो CSS ही इस्तेमाल करें।

CSS transitions और @keyframes कैसे काम करते हैं?

Transition किसी property के बदलने पर, जैसे :hover पर, उसे दो values के बीच एनिमेट करता है। Keyframe एनिमेशन @keyframes से नाम वाले स्टेप तय करता है और उन्हें animation shorthand से जोड़ता है, ताकि यह लोड पर चल सके, लूप हो सके या एक बार चल सके।

.badge {
  animation: pop-in 400ms ease-out both;
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .badge { animation: none; }
}

both fill mode एनिमेशन शुरू होने से पहले पहला फ़्रेम और खत्म होने के बाद आखिरी फ़्रेम लागू रखता है, जिससे बिना स्टाइल वाली स्टेट की झलक नहीं दिखती।

prefers-reduced-motion media feature बताता है कि विज़िटर ने iOS, macOS, Windows या Android में मोशन कम करने की सेटिंग चालू की है या नहीं। इसकी दो values हैं, no-preference और reduce, और MDN के अनुसार यह जनवरी 2020 से व्यापक रूप से उपलब्ध है। reduce के लिए बड़ी मूवमेंट हटाना न्यूनतम ज़रूरत है; छोटा opacity fade आमतौर पर फिर भी ठीक रहता है। reduced motion गाइड में बताया गया है कि क्या रखें और क्या हटाएँ।

Web Animations API कब CSS से बेहतर है?

Web Animations API तब इस्तेमाल करें जब एनिमेशन runtime data पर निर्भर हो या शुरू होने के बाद उसे कंट्रोल करना हो। element.animate(keyframes, options) वही keyframes लेता है जो CSS इस्तेमाल करता है, बस JavaScript objects के रूप में लिखे हुए, और एक Animation object लौटाता है।

const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
const card = document.querySelector(".card");

if (!reduce) {
  const anim = card.animate(
    [
      { transform: "translateY(0)" },
      { transform: "translateY(-8px)" },
      { transform: "translateY(0)" },
    ],
    { duration: 600, easing: "ease-out", iterations: 1 }
  );
  anim.finished.then(() => card.classList.add("settled"));
}

लौटाए गए object में play(), pause(), reverse() और cancel() हैं, साथ में एक finished promise। इससे स्टेप को क्रम में चलाना, currentTime से scrub करना, या यूज़र के पेज छोड़ने पर एनिमेशन रोकना आसान हो जाता है। CSS यह सब classes toggle किए और animationend सुने बिना नहीं कर सकता।

Media queries script पर लागू नहीं होतीं, इसलिए ऊपर की तरह prefers-reduced-motion को matchMedia से खुद चेक करें।

बिना आवाज़ के वीडियो एनिमेशन ऑटोप्ले कैसे करें?

video element में autoplay muted loop playsinline जोड़ें। ब्राउज़र ऑटोप्ले तभी होने देते हैं जब वीडियो muted हो या उसमें audio track न हो। iPhone पर WebKit वीडियो को inline सिर्फ़ playsinline के साथ चलाता है; इसके बिना वीडियो टैप का इंतज़ार करता है और full screen में खुलता है।

पेज के बैकग्राउंड पर कैरेक्टर या लोगो दिखाने के लिए ट्रांसपेरेंसी चाहिए, और कोई एक format हर जगह ट्रांसपेरेंट नहीं होता। Safari WebM चलाता है लेकिन उसका अल्फ़ा चैनल हटा देता है, इसलिए पहले HEVC-with-alpha .mov और दूसरे नंबर पर VP9-alpha WebM रखें:

<video autoplay muted loop playsinline preload="metadata"
       width="400" height="400" poster="/mascot-poster.png">
  <!-- Safari: HEVC with alpha must come first -->
  <source src="/mascot.mov" type="video/quicktime; codecs=hvc1.1.6.H120.b0">
  <!-- Chrome, Edge, Firefox: VP9 with alpha -->
  <source src="/mascot.webm" type="video/webm; codecs=vp09.00.41.08">
</video>

ब्राउज़र पहला ऐसा source चुनते हैं जिसे वे चला सकें। अगर WebM पहले होता, तो Safari उसे चुनता और काला बॉक्स दिखाता। ट्रांसपेरेंट वीडियो गाइड में दोनों फ़ाइलों की encoding बताई गई है। मोशन कम करने की सेटिंग के लिए, जब matchMedia("(prefers-reduced-motion: reduce)") match करे, तो script से ऑटोप्ले वीडियो pause करें और poster दिखता रहने दें।

Lottie या dotLottie एनिमेशन कैसे एम्बेड करें?

Lottie किसी After Effects एनिमेशन का JSON export है; dotLottie (.lottie) एक compressed पैकेज है जिसमें कई एनिमेशन, themes और स्टेट मशीन हो सकती हैं। LottieFiles का dotlottie-web प्रोजेक्ट plain JavaScript, React, Vue, Svelte, Solid और एक web component के लिए players देता है। ये सभी .json और .lottie दोनों फ़ाइलें चलाते हैं।

Web component को किसी build step की ज़रूरत नहीं, इसलिए static पेज पर यह सबसे आसान विकल्प है:

<dotlottie-wc src="/animations/confetti.lottie" autoplay loop
  style="width: 320px; height: 320px"></dotlottie-wc>
<script type="module"
  src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.10.0/dist/dotlottie-wc.js"></script>

@latest की जगह वह version pin करें जिसे आपने टेस्ट किया है, ताकि कोई update बिना बताए आपका पेज न बदल दे। Bundler के साथ, @lottiefiles/dotlottie-wc इंस्टॉल करें और script tag की जगह import "@lottiefiles/dotlottie-wc"; जोड़ें। Airbnb की पुरानी lottie-web library भी .json फ़ाइलों के लिए काम करती है, अगर आप पहले से इसे इस्तेमाल कर रहे हैं।

Rive एनिमेशन कैसे एम्बेड करें और उसकी स्टेट कैसे बदलें?

Rive web runtime लोड करें, उसे एक canvas और एक .riv फ़ाइल दें, और स्टेट मशीन का नाम बताएँ। ज़्यादातर साइटों के लिए Rive @rive-app/webgl2 की सलाह देता है; @rive-app/canvas वही API देता है और अगर आप एक साथ कई एनिमेशन दिखाते हैं तो ब्राउज़र की प्रति पेज WebGL contexts की सीमा से बचाता है। onLoad में resizeDrawingSurfaceToCanvas() कॉल करें ताकि high-density स्क्रीन पर ड्रॉइंग शार्प दिखे।

<canvas id="mascot" width="400" height="400"
        role="img" aria-label="Animated mascot"></canvas>
<script src="https://unpkg.com/@rive-app/webgl2@2.44.2"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const r = new rive.Rive({
    src: "/mascot.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
  });
</script>

autoBind: true के साथ runtime फ़ाइल के default view model को bind करता है, और आप उसमें value लिखकर स्टेट बदलते हैं। जिस फ़ाइल में एक mood नंबर और एक success ट्रिगर हो, उसमें यह ऐसा दिखता है:

const vm = () => r.viewModelInstance;

form.addEventListener("submit", () => { vm().number("mood").value = 5; });  // loading
api.onDone = () => { vm().trigger("success").trigger(); vm().number("mood").value = 0; };

Charmotion की .riv फ़ाइलें इसी तरह बनी होती हैं: कोई कैरेक्टर, मैस्कॉट या लोगो अपलोड करें और आपको CharacterViewModelMachine मिलता है, जिसमें 0 से 9 तक का mood नंबर (idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention) और success, error, yes, no, enter और exit के ट्रिगर होते हैं, साथ में web, React और SwiftUI code भी। पुराने input system वाली फ़ाइलें भी काम करती हैं; स्टेट मशीन गाइड देखें।

वेबसाइट एनिमेशन को तेज़ कैसे रखें?

तीन आदतें ज़्यादातर jank और धीमी लोडिंग से बचाती हैं:

• transform और opacity को एनिमेट करें। ब्राउज़र आमतौर पर इन्हें layout दोबारा calculate किए बिना composite कर लेते हैं। width, top या margin को एनिमेट करने से हर फ़्रेम पर layout होता है।
• Players और फ़ाइलें सिर्फ़ ज़रूरत पड़ने पर लोड करें। Rive के अनुसार उसका WebGL2 WASM brotli compression के बाद 648 KB है (जनवरी 2026); हल्का canvas-lite runtime लगभग 373 KB brotli है। इसे पूरी साइट पर नहीं, सिर्फ़ कैरेक्टर दिखाने वाले पेजों पर लोड करें, और IntersectionObserver से canvas के स्क्रीन पर आने पर शुरू करें।
• हर media element का साइज़ तय करें। Canvas और वीडियो पर width और height सेट करें ताकि लोड होने पर पेज खिसके नहीं, और नीचे वाले वीडियो के लिए preload="metadata" या "none" इस्तेमाल करें।

new IntersectionObserver(([entry], obs) => {
  if (entry.isIntersecting) { startMascot(); obs.disconnect(); }
}).observe(document.getElementById("mascot"));

आखिर में, लूपिंग एनिमेशन को बंद करने का विकल्प दें। लगातार उछलते मैस्कॉट के बगल में लंबा पेज पढ़ने वाला विज़िटर pause बटन या शांत idle लूप के लिए आपका शुक्रगुज़ार होगा।

वेब पेज में एनिमेटेड कैरेक्टर कैसे जोड़ें

1. तरीका चुनें. इंटरफ़ेस मोशन के लिए CSS, तय क्लिप के लिए वीडियो, और डिज़ाइन किए गए कैरेक्टर के लिए Rive या Lottie फ़ाइल इस्तेमाल करें।
2. फ़ाइलें जोड़ें. .riv, .lottie या वीडियो फ़ाइलें अपने static फ़ोल्डर में रखें, वीडियो के लिए एक poster image के साथ।
3. Markup जोड़ें. साइज़ तय किया हुआ <canvas>, <dotlottie-wc> या <video autoplay muted loop playsinline> element जोड़ें।
4. Player लोड करें. Pin किया हुआ player script शामिल करें, या अपने bundler से पैकेज import करें, सिर्फ़ उन पेजों पर जिन्हें इसकी ज़रूरत है।
5. इवेंट जोड़ें. Form, fetch या click handlers से मूड नंबर सेट करें या ट्रिगर फ़ायर करें।
6. मोशन कम करें सेटिंग का ध्यान रखें. CSS में और script में matchMedia से prefers-reduced-motion चेक करें, और सेटिंग चालू होने पर एक static फ़्रेम दिखाएँ।

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

वेबसाइट में एनिमेशन जोड़ने का सबसे आसान तरीका क्या है?

CSS. :hover पर transition या छोटा @keyframes एनिमेशन किसी library या अतिरिक्त डाउनलोड के बिना चलता है। जब JavaScript से playback कंट्रोल करना हो, तब Web Animations API अपनाएँ, और Lottie, Rive या वीडियो पर तभी जाएँ जब मोशन किसी डिज़ाइनर ने बनाया हो।

iPhone पर मेरा बैकग्राउंड वीडियो ऑटोप्ले क्यों नहीं होता?

शायद इसमें muted या playsinline नहीं है। iOS Safari सिर्फ़ बिना आवाज़ वाले या muted वीडियो को ऑटोप्ले करता है, और उन्हें inline सिर्फ़ playsinline होने पर चलाता है। Low Power Mode भी ऑटोप्ले रोक सकता है, इसलिए हमेशा एक poster image सेट करें जो अकेले भी ठीक दिखे।

क्या वेबसाइट एनिमेशन के लिए GIF ठीक है?

आमतौर पर नहीं। GIF फ़ाइलें उसी तरह की MP4 या WebM फ़ाइलों से कहीं बड़ी होती हैं और सिर्फ़ एक पूरी तरह ट्रांसपेरेंट रंग सपोर्ट करती हैं, इसलिए मुलायम किनारे टेढ़े-मेढ़े दिखते हैं। क्लिप के लिए muted लूपिंग वीडियो इस्तेमाल करें, और वेक्टर कैरेक्टर व आइकन के लिए Rive या Lottie फ़ाइल।

क्या Rive या Lottie इस्तेमाल करने के लिए framework चाहिए?

नहीं। दोनों के plain JavaScript player हैं। Rive का web रनटाइम और dotLottie web component किसी static HTML पेज पर एक script tag से लोड हो सकते हैं, और bundler इस्तेमाल करने पर दोनों के npm पैकेज और React wrapper भी उपलब्ध हैं।

इस गाइड से झटपट जवाब

• वेबसाइट में Lottie एनिमेशन कैसे जोड़ें?
• plain HTML पेज में Rive एनिमेशन कैसे जोड़ें?
• स्मूथ परफ़ॉर्मेंस के लिए कौन-सी CSS properties एनिमेट करें?

स्रोत

• Using CSS animations, MDN Web Docs
• prefers-reduced-motion, MDN Web Docs
• Using the Web Animations API, MDN Web Docs
• New video policies for iOS, WebKit
• Video with alpha transparency on the web, Jake Archibald
• dotlottie-web: players for web, React, Vue, Svelte and web components, LottieFiles on GitHub
• Web (JS) runtime, Rive
• Data binding on the web, Rive