एनिमेशन सीएसएस के लिए एक शक्तिशाली अतिरिक्त है, लेकिन उनका टेक्स्ट फॉर्म उनके साथ काम करने में अजीब बना सकता है। बचाव के लिए Chrome के DevTools!

सीएसएस एनिमेशन, ठीक से किया गया, आपकी साइट को दूसरे स्तर पर उठा सकता है। लेकिन इन एनिमेशनों को उन उपकरणों के बिना बनाना मुश्किल हो सकता है जो उन पर अच्छा नियंत्रण प्रदान करते हैं। यदि आपके एनीमेशन के प्रत्येक चरण पर वास्तव में क्या हो रहा है यह देखने का कोई तरीका हो तो क्या होगा?

Google Chrome और Firefox दोनों की DevTools सुविधा आपके एनिमेशन का निरीक्षण करने की क्षमता के साथ आती है। जानें कि अपने स्वयं के एनिमेशन को बेहतर बनाने और वेब पर अपने पसंदीदा एनिमेशन को रिवर्स-इंजीनियर करने के लिए इस सुविधा का उपयोग कैसे करें।

Chrome का DevTools इसका एक शानदार तरीका है अपने सीएसएस के सभी पहलुओं को डीबग करें, और इसके अलावा और भी बहुत कुछ। यह समझने के लिए कि आप एनिमेशन का निरीक्षण करने के लिए इसका उपयोग कैसे कर सकते हैं, इस सरल उदाहरण से शुरुआत करें।

इन उदाहरणों के लिए कोड यहां उपलब्ध है एक GitHub रिपॉजिटरी.

HTML और CSS के साथ एनिमेशन को परिभाषित करें

निम्नलिखित HTML दो तत्वों के साथ एक पृष्ठ प्रस्तुत करता है: a और ए. पृष्ठ नाम की एक सीएसएस फ़ाइल भी आयात करता है

स्टाइल.सीएसएस:

html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<linkrel="stylesheet"href="style.css">
head>
<body>
<divid="box">div>
<button>Test Buttonbutton>
body>
html>

दोनों तत्वों को स्टाइल करने के लिए, एक बनाएं स्टाइल.सीएसएस HTML के समान फ़ोल्डर में फ़ाइल करें और निम्नलिखित जोड़ें:

#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000msease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1pxsolidblack;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100msease-in-out, color 100msease-in-out;
cursor: pointer;
}


button:hover {
background-color: black;
color: white;
}


@keyframes rotateAndChangeColor {
 0% {
rotate: 0deg;
background: red;
 }
 10% {
background: green;
 }
 40% {
background: blue;
 }
 70% {
background: yellow;
 }
 100% {
rotate: 360deg;
background: red;
 }
}

ये शैलियाँ दो घटक बनाती हैं:

  • एक साधारण बॉक्स जो पेज लोड होने पर घूमता है और रंग बदलता है।
  • एक बटन जिसके ऊपर होवर करने पर उसका पृष्ठभूमि रंग बदल जाता है।

ध्यान दें कि लाल बॉक्स का उपयोग करके एनिमेट होता है सीएसएस @कीफ़्रेम निर्देश, जबकि बटन एक संक्रमण का उपयोग करता है। यह आपको ब्राउज़र के DevTools का उपयोग करके दो दृष्टिकोणों की तुलना करने देता है।

तक पहुँचने के लिए एनिमेशन Chrome DevTools में टैब:

  1. संदर्भ मेनू लाने के लिए अपने पृष्ठ पर राइट-क्लिक करें।
  2. क्लिक निरीक्षण.
  3. ऊपरी दाएं कोने में ट्रिपल डॉट्स पर क्लिक करें।
  4. पर जाए अधिक उपकरण > एनिमेशन.

इससे निचले भाग में एनीमेशन ड्रॉअर खुल जाएगा।

आपके पेज पर होने वाला कोई भी एनिमेशन यहां दिखाई देगा। यदि आप अपना पृष्ठ ताज़ा करते हैं और बटन पर होवर करते हैं, तो एनिमेशन एनिमेशन टैब के अंतर्गत दिखाई देंगे।

असली शक्ति तब आती है जब आप इनमें से किसी एक एनिमेशन पर क्लिक करते हैं। उदाहरण के लिए, यदि आप बॉक्स के एनीमेशन पर क्लिक करते हैं, तो आप देखेंगे कि ब्राउज़र कीफ़्रेम को निम्नानुसार प्रस्तुत करता है:

DevTools आपके द्वारा चुने गए तत्व से संबंधित सभी एनिमेशन प्रदर्शित करते हैं। चूँकि लाल बॉक्स के लिए केवल एक ही एनीमेशन परिभाषित है-घुमाएँऔर रंग बदलें-आप बस इसका विवरण देखेंगे।

आप एनीमेशन को अधिक तेज़ बनाने के लिए लाइन को बाईं ओर खींच सकते हैं या एनीमेशन को धीमा करने के लिए इसे दाईं ओर खींच सकते हैं। आप पॉज़ और प्ले आइकन को टॉगल करके एनीमेशन को कुछ बिंदुओं पर रोक भी सकते हैं। शीर्ष पर प्रतिशत आपको एनीमेशन को क्रमशः उसकी सामान्य गति के एक चौथाई और उसकी गति के दसवें हिस्से पर चलाने की अनुमति देता है।

जब आप बटन ट्रांज़िशन का निरीक्षण करते हैं, तो DevTools ट्रांज़िशन के अलग-अलग गुण दिखाएगा: रंग और पृष्ठभूमि रंग।

यह टूल आपको अपने एनीमेशन में हेरफेर करके यह देखने की सुविधा देता है कि यह वास्तव में कैसे काम कर रहा है। आप इसका उपयोग कर सकते हैं अपनी वेबसाइट का समस्या निवारण करें यदि कोई समस्या है.

उन्नत एनिमेशन उदाहरण

अपने HTML में मार्कअप को प्रतिस्थापित करके प्रारंभ करें निम्नलिखित मार्कअप के साथ टैग करें:


class="move-me move-me-1">steps(4, end)</div>
<br />

class="move-me move-me-2">steps(4, start)</div>
<br />

class="move-me move-me-3">no steps</div>

फिर अपनी सभी शैलियों को बदलें स्टाइल.सीएसएस इसके साथ फ़ाइल करें:

.move-me {
display: inline-block; 
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8ssteps(4, end) infinite;
}


.move-me-2 {
animation: move-in-steps 8ssteps(4, start) infinite;
}


.move-me-3 {
animation: move-in-steps 8sinfinite;
}


body {
padding: 20px;
}


@keyframes move-in-steps {
 0% {
left: 0;
background: blue;
 }
 100% {
left: 100%;
background: red;
 }
}

सभी तत्वों के पास है कदम-दर-कदम एनीमेशन उन पर लागू होता है, जो स्थिति और पृष्ठभूमि रंग को परिवर्तित करता है। इसके अलावा, प्रत्येक बॉक्स में उठाए जाने वाले कदमों की संख्या को नियंत्रित करने के लिए एक अलग एनीमेशन होता है।

जबकि तीसरा बॉक्स लगातार दाईं ओर स्लाइड करता है, पहले दो एक समय में दो कदम आगे बढ़ेंगे जब तक कि वे सभी स्क्रीन के अंत तक नहीं पहुंच जाते (दूसरा बॉक्स पहले बॉक्स से पहले शुरू होता है)।

यदि आप खोलते हैं एनिमेशन DevTools में टैब करें और पेज को रीफ्रेश करें, आपको इन एनिमेशन से संबंधित सभी जानकारी मिल जाएगी:

ऐसे कई तत्व हैं जो एक ही अवधि में सजीव होते हैं। इस परिदृश्य में, पृष्ठभूमि का रंग और बॉक्स की स्थिति तीनों बॉक्स के लिए एक ही समय में चेतन होती है।

ध्यान देने योग्य एक और बात प्रत्येक एनीमेशन लाइन पर नोड्स हैं। जब कोई एनीमेशन अनंत बार होता है, तो नोड्स दिखाते हैं कि एनीमेशन में प्रत्येक दोहराव कहां से शुरू होता है और कहां समाप्त होता है।

खाली नोड्स अनिवार्य रूप से आपके एनीमेशन में कीफ़्रेम हैं, जबकि ठोस, रंगीन नोड्स एनीमेशन की शुरुआत और अंत का प्रतिनिधित्व करते हैं। हर बार जब आपका एनीमेशन दोबारा शुरू होगा तो आपके पास गहरे रंग के नोड्स होंगे।

अंत में, आप DevTools का उपयोग करके एनिमेशन को संपादित कर सकते हैं, जैसे आप किसी भी CSS प्रॉपर्टी के साथ कर सकते हैं। एनीमेशन यूआई का उपयोग करके आपके द्वारा किए गए सभी परिवर्तन इनलाइन शैलियों में दिखाई देंगे शैलियों टैब, और इसके विपरीत। इससे आप बदलाव कर सकते हैं, उनका परीक्षण कर सकते हैं और उन्हें अपने वास्तविक प्रोजेक्ट में कॉपी कर सकते हैं।

Google Chrome की DevTools सुविधा एनिमेशन सहित आपके CSS को डीबग करने के लिए एक अद्भुत टूल है। यह आपके पृष्ठ पर प्रत्येक संक्रमण और एनीमेशन का एक विस्तृत दृश्य प्रदान करता है, ताकि आप देख सकें कि प्रत्येक चरण पर वास्तव में क्या हो रहा है।

एक वेब डेवलपर के रूप में, आपको अपने ब्राउज़र के DevTools फ़ंक्शन, या इसके समकक्ष से परिचित होना चाहिए।