बेहतर परफ़ॉर्मेंस वाले सीएसएस ऐनिमेशन बनाने का तरीका

Kayce Basques

Rachel Andrew

इस गाइड में, बेहतर परफ़ॉर्मेंस वाले सीएसएस ऐनिमेशन बनाने का तरीका बताया गया है.

इन सुझावों के पीछे की वजह जानने के लिए, कुछ ऐनिमेशन धीमे क्यों होते हैं? लेख पढ़ें.

वेबसाइट का अलग-अलग ब्राउज़र पर चलना

इस गाइड में सुझाई गई सभी सीएसएस प्रॉपर्टी, अलग-अलग ब्राउज़र पर अच्छी तरह से काम करती हैं.

transform

Browser Support

• 36
• 12
• 16
• 9

Source

opacity

Browser Support

• 1
• 12
• 1
• 2

Source

will-change

Browser Support

• 36
• 79
• 36
• 9.1

Source

किसी एलिमेंट की जगह बदलना

किसी एलिमेंट को मूव करने के लिए, transform प्रॉपर्टी की translate या rotation कीवर्ड वैल्यू का इस्तेमाल करें.

उदाहरण के लिए, किसी आइटम को व्यू में स्लाइड करने के लिए, translate का इस्तेमाल करें.

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

एलिमेंट को घुमाने के लिए, rotate का इस्तेमाल करें. इस उदाहरण में, किसी एलिमेंट को 360 डिग्री पर घुमाया गया है.

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

किसी एलिमेंट का साइज़ बदलना

किसी एलिमेंट का साइज़ बदलने के लिए, transform प्रॉपर्टी की scale कीवर्ड वैल्यू का इस्तेमाल करें.

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

किसी एलिमेंट के दिखने की सेटिंग में बदलाव करना

किसी एलिमेंट को दिखाने या छिपाने के लिए, opacity का इस्तेमाल करें.

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

ध्यान दें: अलग-अलग ऐनिमेशन के उदाहरणों को कॉपी करके चिपकाने के लिए, Animista पर जाएं.

लेआउट या पेंट को ट्रिगर करने वाली प्रॉपर्टी से बचें

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

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

लेयर बनाने की सुविधा चालू करना

कुछ ऐनिमेशन धीमे क्यों होते हैं? लेख में बताया गया है कि एलिमेंट को नई लेयर पर रखने से, ब्राउज़र उन्हें फिर से पेंट कर सकता है. इसके लिए, उसे बाकी लेआउट को फिर से पेंट करने की ज़रूरत नहीं होती.

आम तौर पर, ब्राउज़र यह तय कर सकते हैं कि किन आइटम को नई लेयर पर रखना है. हालांकि, will-change प्रॉपर्टी का इस्तेमाल करके, लेयर बनाने के लिए मैन्युअल तरीके से फ़ोर्स किया जा सकता है. जैसा कि नाम से पता चलता है, यह प्रॉपर्टी ब्राउज़र को बताती है कि इस एलिमेंट में किसी तरह का बदलाव होने वाला है.

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

सीएसएस में, किसी भी सिलेक्टर पर will-change लागू किया जा सकता है:

body > .sidebar {
  will-change: transform;
}

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

अगर किसी ब्राउज़र में will-change काम नहीं करता है, तो उसमें लेयर बनाने के लिए, transform: translateZ(0) सेट किया जा सकता है.

धीमे या गड़बड़ी वाले ऐनिमेशन को डीबग करना

Chrome DevTools और Firefox DevTools की मदद से, यह पता लगाया जा सकता है कि आपके ऐनिमेशन धीमे क्यों हैं या उनमें गड़बड़ी क्यों हो रही है.

देखें कि क्या कोई ऐनिमेशन लेआउट को ट्रिगर करता है

transform के अलावा किसी अन्य चीज़ का इस्तेमाल करके, किसी एलिमेंट को मूव करने वाला ऐनिमेशन धीमा हो सकता है. इस उदाहरण में, transform का इस्तेमाल करके बनाए गए ऐनिमेशन की तुलना, top और left का इस्तेमाल करके बनाए गए ऐनिमेशन से की गई है.

ऐसा न करें

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

यह करें

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

इन दो उदाहरणों में इसकी जांच की जा सकती है. साथ ही, DevTools का इस्तेमाल करके परफ़ॉर्मेंस के बारे में जाना जा सकता है.

• पहले, top और left ऐनिमेशन के साथ.
• इसके बाद, transform.

Chrome DevTools

1. परफ़ॉर्मेंस पैनल खोलें.
2. ऐनिमेशन के दौरान, रनटाइम परफ़ॉर्मेंस रिकॉर्ड करें.
3. खास जानकारी टैब देखें.

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

animation-with-top-left उदाहरण की वजह से रेंडरिंग का काम होता है.

animation-with-transform उदाहरण से रेंडरिंग का काम नहीं होता.

Firefox DevTools

Firefox DevTools में वॉटरफ़ॉल की मदद से, यह समझा जा सकता है कि ब्राउज़र कहां समय बिता रहा है.

1. परफ़ॉर्मेंस पैनल खोलें.
2. ऐनिमेशन के दौरान परफ़ॉर्मेंस रिकॉर्ड करना.
3. रिकॉर्डिंग बंद करें और वॉटरफ़ॉल टैब की जांच करें.

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

ड्रॉप किए गए फ़्रेम की जांच करना

1. Chrome DevTools में, रेंडरिंग टैब खोलें.
2. एफ़पीएस मीटर चेकबॉक्स को चुनें.
3. ऐनिमेशन चलने के दौरान वैल्यू देखें.

एफ़पीएस मीटर यूज़र इंटरफ़ेस (यूआई) में सबसे ऊपर मौजूद फ़्रेम लेबल पर ध्यान दें. इससे 50% 1 (938 m) dropped of 1878 जैसी वैल्यू दिखती हैं. बेहतर परफ़ॉर्मेंस वाले ऐनिमेशन का प्रतिशत ज़्यादा होता है. जैसे, 99%. इसका मतलब है कि कुछ ही फ़्रेम छोड़े जा रहे हैं और ऐनिमेशन आसानी से चल रहा है.

animation-with-top-left उदाहरण की वजह से, 50% फ़्रेम ड्रॉप हो जाते हैं

animation-with-transform उदाहरण की वजह से, सिर्फ़ 1% फ़्रेम ड्रॉप होते हैं.

यह देखना कि ऐनिमेशन से पेंट ट्रिगर होता है या नहीं

कुछ प्रॉपर्टी को ब्राउज़र पर रेंडर करने में, दूसरों की तुलना में ज़्यादा समय लगता है. उदाहरण के लिए, किसी भी ऐसी चीज़ को रेंडर करने में ज़्यादा समय लगता है जिसमें धुंधलापन शामिल हो. जैसे, किसी शैडो को रेंडर करने में, लाल रंग का बॉक्स बनाने की तुलना में ज़्यादा समय लगता है. ये अंतर हमेशा सीएसएस में नहीं दिखते हैं. हालांकि, ब्राउज़र DevTools की मदद से यह पता लगाया जा सकता है कि किन हिस्सों को फिर से पेंट करने की ज़रूरत है. साथ ही, पेंटिंग से जुड़ी परफ़ॉर्मेंस की अन्य समस्याओं का भी पता लगाया जा सकता है.

Chrome DevTools

1. Chrome DevTools में, रेंडरिंग टैब खोलें.
2. Paint Flashing चुनें.
3. पॉइंटर को स्क्रीन पर घुमाएं.

Google Maps के इस उदाहरण में, आपको एलिमेंट फिर से रेंडर होते हुए दिख सकते हैं.

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

अगर आपको यह पता लगाना है कि किसी प्रॉपर्टी की वजह से पेंटिंग से जुड़ी परफ़ॉर्मेंस की समस्याएं हो रही हैं, तो Chrome DevTools में मौजूद पेंट प्रोफ़ाइलर आपकी मदद कर सकता है.

Firefox DevTools

1. सेटिंग खोलें और पेंट फ़्लैश करने की सुविधा टॉगल करें के लिए, टूलबॉक्स बटन जोड़ें.
2. जिस पेज की जांच करनी है उस पर जाकर, बटन को टॉगल करके चालू करें. इसके बाद, हाइलाइट किए गए हिस्सों को देखने के लिए, अपने माउस को घुमाएं या स्क्रोल करें.

कंपोज़िट स्टेज पर ऐनिमेशन बनाना

जहां हो सके वहां ऐनिमेशन को opacity और transform तक सीमित करें, ताकि रेंडरिंग पाथ के कंपोज़िटिंग स्टेज पर ऐनिमेशन बने रहें. DevTools का इस्तेमाल करके यह देखें कि आपके ऐनिमेशन की वजह से, पाथ के किस स्टेज पर असर पड़ रहा है.

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

will-change प्रॉपर्टी का इस्तेमाल कम से कम करें. इसका इस्तेमाल सिर्फ़ तब करें, जब आपको परफ़ॉर्मेंस से जुड़ी कोई समस्या आ रही हो.