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

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

Paul Lewis

Sam Thorogood

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

खास जानकारी

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

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

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

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

CSS से ऐनिमेट करें

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

नीचे कुछ सीएसएस दी गई हैं जो 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 Streamings API की मदद से ऐनिमेट करें

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

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)';
});

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

इसे आज़माएँ

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

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