सीएसएस बनाम JavaScript ऐनिमेशन

सीएसएस या JavaScript का इस्तेमाल करके ऐनिमेशन बनाया जा सकता है. आपको इनमें से किसका इस्तेमाल करना चाहिए और क्यों?

Paul Lewis

Sam Thorogood

वेब पर ऐनिमेशन बनाने के दो मुख्य तरीके हैं: सीएसएस और JavaScript का इस्तेमाल करके. आपको कौनसा विकल्प चुनना है, यह इस बात पर निर्भर करता है कि आपके प्रोजेक्ट में कौनसी अन्य डिपेंडेंसी शामिल हैं और आपको किस तरह के इफ़ेक्ट चाहिए.

खास जानकारी

• आसान "वन-शॉट" ट्रांज़िशन के लिए, सीएसएस ऐनिमेशन का इस्तेमाल करें. जैसे, यूज़र इंटरफ़ेस (यूआई) एलिमेंट के स्टेटस को टॉगल करना.
• जब आपको वीडियो में बाउंस करने, रोकने, रोकने, पीछे जाने या धीमा करने जैसे बेहतर इफ़ेक्ट चाहिए, तो JavaScript ऐनिमेशन का इस्तेमाल करें.
• अगर आपको JavaScript का इस्तेमाल करके ऐनिमेशन बनाना है, तो Web Animations API या किसी ऐसे मॉडर्न फ़्रेमवर्क का इस्तेमाल करें जिसका इस्तेमाल करना आपको आसान लगे.

ज़्यादातर बुनियादी ऐनिमेशन, सीएसएस या JavaScript में से किसी एक का इस्तेमाल करके बनाए जा सकते हैं. हालांकि, इनमें लगने वाला समय और मेहनत अलग-अलग होती है. सीएसएस बनाम JavaScript की परफ़ॉर्मेंस भी देखें. दोनों के अपने फ़ायदे और नुकसान हैं, लेकिन ये दिशा-निर्देश अच्छे हैं:

• जब आपके पास यूज़र इंटरफ़ेस (यूआई) एलिमेंट के लिए छोटे और अपने-आप काम करने वाले स्टेटस हों, तो सीएसएस का इस्तेमाल करें. सीएसएस ट्रांज़िशन और ऐनिमेशन, नेविगेशन मेन्यू को साइड से दिखाने या टूलटिप दिखाने के लिए सबसे सही हैं. स्टेटस को कंट्रोल करने के लिए, JavaScript का इस्तेमाल किया जा सकता है. हालांकि, ऐनिमेशन आपकी सीएसएस में ही होंगे.
• जब आपको अपने ऐनिमेशन पर ज़्यादा कंट्रोल चाहिए, तब JavaScript का इस्तेमाल करें. Web Animations API, स्टैंडर्ड पर आधारित तरीका है. यह आज के ज़्यादातर आधुनिक ब्राउज़र में उपलब्ध है. इससे रीयल ऑब्जेक्ट मिलते हैं, जो ऑब्जेक्ट-ओरिएंटेड ऐप्लिकेशन के लिए आदर्श होते हैं. JavaScript तब भी काम आता है, जब आपको अपने ऐनिमेशन को रोकना, रोकना, धीमा करना या उलटा करना हो.
• जब आपको पूरे सीन को मैन्युअल तरीके से ऑर्केस्ट्रेट करना हो, तो सीधे requestAnimationFrame का इस्तेमाल करें. यह JavaScript का बेहतर तरीका है. हालांकि, यह तब काम का हो सकता है, जब कोई गेम बनाया जा रहा हो या एचटीएमएल कैनवस पर ड्रॉ किया जा रहा हो.

इसके अलावा, अगर आपने पहले से ही किसी ऐसे JavaScript फ़्रेमवर्क का इस्तेमाल किया जा रहा है जिसमें ऐनिमेशन की सुविधा शामिल है, जैसे कि jQuery के .animate() तरीके या GreenSock के TweenMax के ज़रिए, तो आपको अपने ऐनिमेशन के लिए उसी फ़्रेमवर्क का इस्तेमाल करना ज़्यादा आसान लग सकता है.

सीएसएस की मदद से ऐनिमेशन जोड़ना

सीएसएस की मदद से ऐनिमेशन बनाना, स्क्रीन पर किसी चीज़ को मूव करने का सबसे आसान तरीका है. इस तरीके को एलान करने वाला कहा जाता है, क्योंकि इसमें यह बताया जाता है कि आपको क्या करना है.

यहां कुछ सीएसएस दी गई है, जो किसी एलिमेंट 100px को X और Y दोनों ऐक्सिस में ले जाती है. ऐसा करने के लिए, 500ms का इस्तेमाल करने के लिए सेट किए गए सीएसएस ट्रांज़िशन का इस्तेमाल किया जाता है. move क्लास जोड़ने पर, transform वैल्यू बदल जाती है और ट्रांज़िशन शुरू हो जाता है.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

इसे आज़माएँ

ट्रांज़िशन की अवधि के अलावा, धीरे-धीरे गति बदलने के विकल्प भी होते हैं. इससे यह तय होता है कि ऐनिमेशन कैसा दिखेगा. आसानी से बदलने की सुविधा के बारे में ज़्यादा जानने के लिए, आसानी से बदलने की सुविधा के बारे में बुनियादी जानकारी वाली गाइड देखें.

अगर ऊपर दिए गए स्निपेट की तरह, ऐनिमेशन मैनेज करने के लिए अलग-अलग सीएसएस क्लास बनाई जाती हैं, तो हर ऐनिमेशन को टॉगल करने के लिए JavaScript का इस्तेमाल किया जा सकता है:

box.classList.add('move');

ऐसा करने से, आपके ऐप्लिकेशन को बेहतर बैलेंस मिलता है. JavaScript की मदद से स्टेटस मैनेज करने पर फ़ोकस किया जा सकता है. साथ ही, टारगेट एलिमेंट पर सही क्लास सेट की जा सकती हैं. इससे, ऐनिमेशन को ब्राउज़र मैनेज कर पाएगा. इस तरीके का इस्तेमाल करने पर, एलिमेंट पर transitionend इवेंट को सुना जा सकता है. हालांकि, ऐसा सिर्फ़ तब किया जा सकता है, जब आप Internet Explorer के पुराने वर्शन के लिए सहायता छोड़ने को तैयार हों. इन इवेंट के साथ काम करने वाला पहला वर्शन 10 था. अन्य सभी ब्राउज़र पर, इवेंट की सुविधा कुछ समय से काम कर रही है.

ट्रांज़िशन के खत्म होने का इंतज़ार करने के लिए ज़रूरी JavaScript ऐसा दिखता है:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

सीएसएस ट्रांज़िशन के अलावा, सीएसएस ऐनिमेशन का भी इस्तेमाल किया जा सकता है. इससे, अलग-अलग ऐनिमेशन की मुख्य फ़्रेम, अवधि, और दोहराव पर ज़्यादा कंट्रोल किया जा सकता है.

उदाहरण के लिए, ट्रांज़िशन की मदद से बॉक्स को उसी तरह ऐनिमेट किया जा सकता है. हालांकि, इसे क्लिक करने जैसे किसी भी उपयोगकर्ता इंटरैक्शन के बिना और अनलिमिटेड बार दोहराकर ऐनिमेट किया जा सकता है. एक ही समय में कई प्रॉपर्टी भी बदली जा सकती हैं.

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

इसे आज़माएँ

सीएसएस ऐनिमेशन की मदद से, टारगेट एलिमेंट से अलग ऐनिमेशन तय किया जा सकता है. साथ ही, ज़रूरी ऐनिमेशन चुनने के लिए animation-name प्रॉपर्टी का इस्तेमाल किया जा सकता है.

अगर आपको अपने सीएसएस ऐनिमेशन को पुराने ब्राउज़र पर चलाना है, तो आपको वेंडर प्रीफ़िक्स जोड़ने होंगे. कई टूल की मदद से, अपनी ज़रूरत के हिसाब से सीएसएस के प्रीफ़िक्स वाले वर्शन बनाए जा सकते हैं. इससे, सोर्स फ़ाइलों में प्रीफ़िक्स वाला वर्शन लिखने की ज़रूरत नहीं पड़ती.

JavaScript और Web Animations API की मदद से ऐनिमेशन बनाना

सीएसएस ट्रांज़िशन या ऐनिमेशन लिखने की तुलना में, JavaScript से ऐनिमेशन बनाना ज़्यादा मुश्किल है. हालांकि, आम तौर पर यह डेवलपर को ज़्यादा सुविधाएं देता है. Web Animations API का इस्तेमाल करके, किसी खास सीएसएस प्रॉपर्टी को ऐनिमेट किया जा सकता है या कॉम्पोज़ेबल इफ़ेक्ट ऑब्जेक्ट बनाए जा सकते हैं.

JavaScript ऐनिमेशन ज़रूरी हैं, क्योंकि उन्हें कोड के हिस्से के तौर पर इनलाइन लिखा जाता है. इन्हें दूसरे ऑब्जेक्ट में भी शामिल किया जा सकता है. यहां वह JavaScript दिया गया है जिसे आपको ऊपर बताए गए सीएसएस ट्रांज़िशन को फिर से बनाने के लिए लिखना होगा:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

डिफ़ॉल्ट रूप से, वेब ऐनिमेशन सिर्फ़ किसी एलिमेंट के प्रज़ेंटेशन में बदलाव करते हैं. अगर आपको अपने ऑब्जेक्ट को उसी जगह पर रखना है जहां वह पहुंचा है, तो ऐनिमेशन खत्म होने के बाद, आपको हमारे सैंपल के मुताबिक उसकी स्टाइल में बदलाव करना होगा.

इसे आज़माएँ

वेब ऐनिमेशन एपीआई, W3C का एक नया स्टैंडर्ड है. यह सुविधा, ज़्यादातर आधुनिक ब्राउज़र में पहले से काम करती है. जिन मॉडर्न ब्राउज़र पर यह सुविधा काम नहीं करती उनके लिए, polyfill उपलब्ध है.

JavaScript ऐनिमेशन की मदद से, हर चरण में एलिमेंट की स्टाइल को पूरी तरह से कंट्रोल किया जा सकता है. इसका मतलब है कि ऐनिमेशन की रफ़्तार को धीमा किया जा सकता है, उन्हें रोका जा सकता है, बंद किया जा सकता है, और उन्हें उलटा चलाया जा सकता है. साथ ही, एलिमेंट में अपनी ज़रूरत के हिसाब से बदलाव किया जा सकता है. यह सुविधा खास तौर पर तब काम आती है, जब जटिल और ऑब्जेक्ट-ओरिएंटेड ऐप्लिकेशन बनाए जा रहे हों. इसकी मदद से, अपने ऐप्लिकेशन के व्यवहार को सही तरीके से कैप्सल किया जा सकता है.