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

Kayce Basques

Rachel Andrew

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

कुछ ऐनिमेशन धीमे क्यों होते हैं? सेक्शन में जाकर, यह जानें कि का सिद्धांत दिया गया है.

ब्राउज़र के साथ काम करना

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

transform

ब्राउज़र सहायता

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 36
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 12
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 16
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 9

सोर्स

opacity

ब्राउज़र सहायता

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 1
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 12
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 1
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 2

सोर्स

will-change

ब्राउज़र सहायता

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 36
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 79
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 36
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 9.1

सोर्स

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

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

उदाहरण के लिए, किसी आइटम को व्यू में स्लाइड करने के लिए, 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);
  }
}

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

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

.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 के इस्तेमाल के उदाहरण और ज़्यादा जानकारी के लिए, यहां जाएं: सीएसएस will-change प्रॉपर्टी के बारे में पूरी जानकारी.

अगर आप किसी ऐसे ब्राउज़र में लेयर बनाने की सुविधा ज़बरदस्ती चालू करते हैं जो will-change के साथ काम नहीं करता (शायद Internet Explorer) है, तो आप 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));
  }
}

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

• पहले.
• बाद में.

Chrome DevTools

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

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

animation-with-top-left के उदाहरण की वजह से रेंडरिंग के काम करने की समस्या.

बदलाव के साथ ऐनिमेशन उदाहरण के लिए रेंडर करने की प्रक्रिया काम नहीं करती.

फ़ायरफ़ॉक्स DevTools

Firefox DevTools में वॉटरफ़ॉल से आपको यह समझने में सहायता मिल सकती है कि ब्राउज़र अपना समय कहां बिता रहा है.

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

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

छूटे हुए फ़्रेम देखें

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

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

animation-with-top-left उदाहरण की वजह से 50% फ़्रेम छूट जाते हैं

ऐनिमेशन के साथ बदलाव उदाहरण के कारण केवल 1% फ़्रेम छूट जाते हैं.

यह जांचना कि कोई ऐनिमेशन पेंट ट्रिगर करता है या नहीं

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

Chrome DevTools

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

Google Maps के इस उदाहरण में, एलिमेंट को फिर से पेंट किया जा रहा है.

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

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

फ़ायरफ़ॉक्स DevTools

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

नतीजा

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

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

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