ऐनिमेशन: सीएसएस ऐनिमेशन के इफ़ेक्ट की जांच करें और उनमें बदलाव करें

Kayce Basques

Sofia Emelianova

Chrome DevTools ऐनिमेशन पैनल टैब की मदद से ऐनिमेशन की जांच करें और उनमें बदलाव करें.

खास जानकारी

ऐनिमेशन कैप्चर करने के लिए, ऐनिमेशन पैनल खोलें. यह ऐनिमेशन का अपने-आप पता लगाकर, उन्हें ग्रुप में बांट देता है.

ऐनिमेशन पैनल के दो मुख्य मकसद हैं:

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

अहम जानकारी: Elements में दिए गए ईज़िंग एडिटर का इस्तेमाल करके, सीएसएस ट्रांज़िशन और ऐनिमेशन ईज़िंग के समय में बदलाव किया जा सकता है. साथ ही, कस्टम बेज़ियर कर्व को कॉन्फ़िगर किया जा सकता है > स्टाइल पैनल.

ऐनिमेशन पैनल में सीएसएस ऐनिमेशन, सीएसएस ट्रांज़िशन, वेब ऐनिमेशन, और व्यू ट्रांज़िशन एपीआई काम करते हैं. requestAnimationFrame ऐनिमेशन अभी काम नहीं कर रहा है.

ऐनिमेशन ग्रुप क्या होता है?

ऐनिमेशन ग्रुप, ऐनिमेशन का एक सेट होता है, जो एक-दूसरे से जुड़े दिखते हैं.

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

दूसरे शब्दों में, ऐनिमेशन पैनल एक ही स्क्रिप्ट ब्लॉक में ट्रिगर हुए ऐनिमेशन को एक साथ ग्रुप कर देता है, लेकिन अगर वे एसिंक्रोनस होते हैं, तो वे अलग-अलग ग्रुप में दिखते हैं.

ऐनिमेशन पैनल खोलें

ऐनिमेशन पैनल को खोलने के दो तरीके हैं:

• DevTools को पसंद के मुताबिक बनाएं और उसे कंट्रोल करें चुनें > ज़्यादा टूल > ऐनिमेशन.

• इनमें से किसी एक को दबाकर, कमांड मेन्यू खोलें:

  • macOS पर: Command+Shift+P
  • Windows, Linux या ChromeOS पर: Control+Shift+P

  इसके बाद, Show Animations टाइप करें और उससे जुड़ा ड्रॉर पैनल चुनें.

डिफ़ॉल्ट रूप से, ऐनिमेशन पैनल, कंसोल पैनल के बगल में टैब के तौर पर खुलता है. पैनल टैब के तौर पर, इसे किसी भी पैनल के साथ इस्तेमाल किया जा सकता है या इसे DevTools के सबसे ऊपर ले जाया जा सकता है.

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

ऐनिमेशन पैनल के यूज़र इंटरफ़ेस (यूआई) के बारे में जानें

ऐनिमेशन पैनल में चार मुख्य सेक्शन होते हैं:

1. कंट्रोल. यहां से, कैप्चर किए गए सभी ऐनिमेशन ग्रुप को ब्लॉक किया जा सकता है सभी ऐनिमेशन ग्रुप हटाए जा सकते हैं, ऐनिमेशन रोकें रोकें या play_arrow फिर शुरू करें या चुने गए ऐनिमेशन ग्रुप की स्पीड बदली जा सकती है.

2. खास जानकारी. दो तरह के कैप्चर किए गए ऐनिमेशन ग्रुप दिखाता है, जिन्हें आइकॉन से मार्क किया गया है: माउस स्क्रोल की मदद से और शेड्यूल सामान्य (समय पर आधारित).

   जानकारी पैनल में जांच करने और बदलाव करने के लिए, यहां किसी ऐनिमेशन ग्रुप को चुनें.

3. टाइमलाइन. ऐनिमेशन ग्रुप के टाइप के आधार पर, टाइमलाइन यह हो सकती है:

   • माउस स्क्रोल से चलने वाले ऐनिमेशन के लिए पिक्सल में.
   • समय के हिसाब से शेड्यूल किए गए ऐनिमेशन के लिए, मिलीसेकंड में.

   टाइमलाइन में, किसी ऐनिमेशन को फिर से फिर से चलाएं, उसे स्क्रब करें या सीधे किसी खास पॉइंट पर जाएं.

4. विवरण. चुने गए ऐनिमेशन ग्रुप की जांच करें और उसमें बदलाव करें.

किसी ऐनिमेशन को कैप्चर करने के लिए, उसे ऐनिमेशन पैनल खुले होने पर ट्रिगर करें.

ऐनिमेशन की जांच करें

ऐनिमेशन कैप्चर करने के बाद, उसे फिर से चलाने के कुछ तरीके यहां दिए गए हैं:

• थंबनेल की झलक देखने के लिए, खास जानकारी पैनल में इस चैनल के थंबनेल पर कर्सर घुमाएं.
• व्यूपोर्ट ऐनिमेशन को स्क्रब करने के लिए प्लेहेड (लाल वर्टिकल बार) को खींचें या प्लेहेड को किसी खास पॉइंट पर सेट करने के लिए टाइमलाइन पर कहीं भी क्लिक करें. अगर ऐनिमेशन पहले से चल रहा था, तो चलता रहता है और किसी वजह से बंद हो जाता है.
• खास जानकारी पैनल से ऐनिमेशन ग्रुप चुनें (ताकि यह जानकारी में दिखे पैनल) पर जाएं और फिर से चलाएं बटन दबाएं. कॉन्टेंट बनाने ऐनिमेशन को व्यूपोर्ट में फिर से चलाया गया.

चुने गए ऐनिमेशन ग्रुप की झलक की स्पीड बदलने के लिए, कंट्रोल बार में मौजूद ऐनिमेशन स्पीड बटन पर क्लिक करें.

ऐनिमेशन विवरण देखें

ऐनिमेशन ग्रुप कैप्चर करने के बाद, जानकारी देखने के लिए, खास जानकारी पैनल में उस पर क्लिक करें.

जानकारी पैनल में, हर ऐनिमेशन के लिए अलग लाइन बनाई जाती है. संबंधित एलिमेंट का पूरा नाम देखने के लिए, नाम वाले कॉलम का साइज़ बदलें.

किसी ऐनिमेशन को व्यूपोर्ट में हाइलाइट करने के लिए, उस पर कर्सर घुमाएं. ऐनिमेशन पर क्लिक करके उसे Elements पैनल.

अगर कुछ ऐनिमेशन की animation-iteration-count प्रॉपर्टी infinite पर सेट है, तो उन्हें लगातार दोहराया जाता रहेगा. ऐनिमेशन पैनल उनकी परिभाषाएं और दोहराव दिखाता है.

किसी ऐनिमेशन के सबसे बाईं ओर और गहरे रंग वाले सेक्शन से उसकी परिभाषा पता चलती है. दाईं ओर, ज़्यादा धुंधले सेक्शन बार-बार इस्तेमाल किए जा सकते हैं.

उदाहरण के लिए, अगले स्क्रीनशॉट में, सेक्शन दो और तीन सेक्शन एक में करें.

अगर दो एलिमेंट पर एक जैसा ऐनिमेशन लागू किया गया है, तो ऐनिमेशन पैनल उन्हें एक ही रंग. रंग भी बेतरतीब है और इसका कोई खास मतलब नहीं है. उदाहरण के लिए, नीचे दिए गए स्क्रीनशॉट में दो एलिमेंट div.eye.left::after और div.eye.right::after का ऐनिमेशन एक जैसा है (eyes) उन पर लागू की गई हैं, जैसे कि div.feet::before और div.feet::after एलिमेंट.

ऐनिमेशन में बदलाव करें

ऐनिमेशन पैनल के साथ किसी ऐनिमेशन में बदलाव करने के तीन तरीके हैं:

• ऐनिमेशन की अवधि.
• मुख्य-फ़्रेम टाइमिंग.
• शुरू होने के समय में देरी.

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

इस सेक्शन के लिए, मान लें कि अगला स्क्रीनशॉट ओरिजनल ऐनिमेशन को दिखाता है:

किसी ऐनिमेशन की अवधि बदलने के लिए, पहले या आखिरी सर्कल को खींचें और छोड़ें.

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

किसी ऐनिमेशन में देरी जोड़ने के लिए, सर्कल पर नहीं, बल्कि ऐनिमेशन पर क्लिक करें. इसके बाद, उसे कहीं भी खींचें और छोड़ें.

@keyframes को लाइव में बदलाव करें

जब स्टाइल में जाकर @keyframes में बदलाव किया जाता है, तो आपको ऐनिमेशन पैनल में इफ़ेक्ट तुरंत दिखते हैं.

इसे इस डेमो पेज पर आज़माएं:

1. ऐनिमेशन पैनल खोलें. यह पेज पर चल रहे पल्स ऐनिमेशन को अपने-आप कैप्चर करता है. कार्रवाई बार में, कंट्रोल में जाकर ऐनिमेशन चुनें.
2. Elements में, class="pulser" वाले एलिमेंट की जांच करें और Elements में जाकर, @keyframes pulse सेक्शन ढूंढें.
3. कीफ़्रेम में बदलाव करने की कोशिश करें. उदाहरण के लिए, दूसरे कीफ़्रेम को 50% से बदलकर 20% करें.
4. देखें कि स्टाइल में किए गए आपके बदलाव, ऐनिमेशन पैनल से कैप्चर किए गए ऐनिमेशन पर कैसे असर डालते हैं.

ऐनिमेशन के दौरान ::view-transition pseudo-elements में बदलाव करें

View Transit API की मदद से, दो स्टेट के बीच ऐनिमेशन वाला ट्रांज़िशन बनाते समय, एक ही चरण में डीओएम को बदला जा सकता है. ऐनिमेशन के दौरान, एपीआई इस स्ट्रक्चर के साथ एक स्यूडो-एलिमेंट ट्री बनाता है:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

Elements में इस स्ट्रक्चर में बदलाव करने के लिए > स्टाइल:

1. DevTools खोलें और व्यू ट्रांज़िशन एपीआई का इस्तेमाल करने वाले पेज की जांच करें. उदाहरण के लिए, यह डेमो पेज.
2. ऐनिमेशन में, रोकें रोकें पर क्लिक करें.

3. पेज पर, ऐनिमेशन ट्रिगर करें. ऐनिमेशन पैनल उसे कैप्चर कर लेता है और तुरंत रुक जाता है. अब ::view-transition स्ट्रक्चर को <head> एलिमेंट के सबसे ऊपर डीओएम में देखा जा सकता है.

   

4. Elements में > स्टाइल, ::view-transition pseudo-elements के सीएसएस में बदलाव करें.

5. ऐनिमेशन को फिर से शुरू करें और नतीजा देखने के लिए उसे फिर से चलाएं.

ज़्यादा जानकारी के लिए, View Transits API की मदद से आसान और आसान ट्रांज़िशन देखें.