इस पोस्ट में देखें कि CodePen पर मिलने वाले कुछ लोकप्रिय ऐनिमेशन कैसे बनाए गए. ये सभी ऐनिमेशन, इस सेक्शन के दूसरे लेखों में बताई गई परफ़ॉर्मर तकनीकों का इस्तेमाल करते हैं.
इन सुझावों के पीछे की वजह जानने के लिए, कुछ ऐनिमेशन धीमे क्यों होते हैं? देखें. साथ ही, काम की सलाह के लिए ऐनिमेशन गाइड देखें.
विज़ार्ड लोड हो रहा है
CodePen पर विज़र्ड लोडिंग ऐनिमेशन देखें
लोड होने वाला यह ऐनिमेशन, पूरी तरह सीएसएस की मदद से बनाया गया है. इमेज और पूरा ऐनिमेशन, सीएसएस और एचटीएमएल में बनाया गया है. इसमें कोई इमेज या JavaScript शामिल नहीं है. Chrome DevTools का इस्तेमाल करके यह समझा जा सकता है कि इसे कैसे बनाया गया था और इसकी परफ़ॉर्मेंस कितनी अच्छी है.
Chrome DevTools की मदद से ऐनिमेशन की जांच करें
ऐनिमेशन के साथ-साथ, Chrome DevTools में परफ़ॉर्मेंस टैब खोलें और ऐनिमेशन के कुछ सेकंड रिकॉर्ड करें. आपको सारांश में देखना चाहिए कि इस एनिमेशन को चलाते समय ब्राउज़र कोई लेआउट या पेंट कार्रवाई नहीं कर रहा है.
यह जानने के लिए कि लेआउट और पेंट की वजह से इस ऐनिमेशन को कैसे बनाया गया, Chrome DevTools में मूव करने वाले किसी भी एलिमेंट की जांच करें. ऐनिमेशन वाले कई एलिमेंट का पता लगाने के लिए, ऐनिमेशन पैनल का इस्तेमाल किया जा सकता है. किसी भी एलिमेंट पर क्लिक करने से वह डीओएम में हाइलाइट हो जाएगा.
उदाहरण के लिए, त्रिकोण चुनें और देखें कि एलिमेंट का बॉक्स, हवा में सफ़र के दौरान कैसे बदलता है. इसके बाद, वह घूमता है और फिर वापस शुरुआती पोज़िशन में आता है.
अगर एलिमेंट अब भी चुना हुआ है, तो स्टाइल पैनल में देखें. वहां आपको त्रिभुज का आकार बनाने वाला सीएसएस और इस्तेमाल किए जा रहे ऐनिमेशन दिखेगा.
यह कैसे काम करता है
बॉर्डर का इस्तेमाल करके, जनरेट किया गया कॉन्टेंट जोड़ने के लिए, ::after स्यूडो एलिमेंट की मदद से त्रिभुज बनाया जाता है.
.triangle {
position: absolute;
bottom: -62px;
left: -10px;
width: 110px;
height: 110px;
border-radius: 50%;
}
.triangle::after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 28px 48px 28px;
border-color: transparent transparent #89beb3 transparent;
}
ऐनिमेशन को सीएसएस की इस लाइन के साथ जोड़ा गया है,
animation: path_triangle 10s ease-in-out infinite;
Chrome DevTools में रहते हुए, स्टाइल पैनल को नीचे की ओर स्क्रोल करके मुख्य-फ़्रेम ढूंढे जा सकते हैं.
यहां आपको दिखेगा कि ऐनिमेशन को transform का इस्तेमाल करके, एलिमेंट की जगह बदलने और उसे घुमाने के लिए बनाया गया है.
transform प्रॉपर्टी, ऐनिमेशन गाइड में बताई गई प्रॉपर्टी में से एक है. इस प्रॉपर्टी की वजह से, ब्राउज़र न तो लेआउट का इस्तेमाल करता है और न ही पेंट करता है. इन वजहों से ऐनिमेशन धीमे होने की मुख्य वजहें होती हैं.
@keyframes path_triangle {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-172px) translatex(10px) rotate(-10deg);
}
55% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
58% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
63% {
transform: rotate(-360deg);
}
}
इस ऐनिमेशन के अलग-अलग मूव करने वाले हिस्से में एक जैसी तकनीक का इस्तेमाल किया गया है. इससे एक जटिल ऐनिमेशन बनता है, जो बिना रुकावट के चलता है.
घूमता हुआ गोल घेरा
CodePen पर पल्सिंग सर्कल देखें
इस तरह के ऐनिमेशन का इस्तेमाल कभी-कभी पेज पर मौजूद किसी चीज़ पर ध्यान खींचने के लिए किया जाता है. ऐनिमेशन को समझने के लिए, Firefox DevTools का इस्तेमाल किया जा सकता है.
Firefox DevTools की मदद से ऐनिमेशन की जांच करें
ऐनिमेशन के साथ-साथ, Firefox DevTools में परफ़ॉर्मेंस टैब खोलें और ऐनिमेशन के कुछ सेकंड रिकॉर्ड करें. रिकॉर्डिंग बंद करें. वॉटरफ़ॉल में आपको दिखेगा कि स्टाइल को फिर से कैलकुलेट करें के लिए कोई एंट्री नहीं है. अब आप जानते हैं कि इस ऐनिमेशन की वजह से स्टाइल रीकैलकुलेशन नहीं होती. इसलिए, लेआउट और पेंट की कार्रवाइयां.
Firefox DevTools पर बने रहने के दौरान सर्कल की जांच करके देखें कि यह ऐनिमेशन कैसे काम करता है.
pulsating-circle की क्लास वाला <div>, सर्कल की पोज़िशन को मार्क करता है, हालांकि, यह खुद कोई सर्कल नहीं बनाता.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
दिखने वाले सर्कल और ऐनिमेशन को बनाने के लिए, ::before और ::after के स्यूडो एलिमेंट का इस्तेमाल किया जाता है.
::before एलिमेंट, सफ़ेद सर्कल के बाहर फैली हुई ओपेक रिंग बनाता है. इसके लिए pulse-ring ऐनिमेशन का इस्तेमाल किया जाता है, जो transform: scale और opacity के ऐनिमेशन का इस्तेमाल करता है.
.pulsating-circle::before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #01a4e9;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
Firefox DevTools में ऐनिमेशन पैनल चुनकर, यह देखने के लिए कि कौनसी प्रॉपर्टी ऐनिमेट की जा रही हैं. इसके बाद, आपको इस्तेमाल किए जा रहे ऐनिमेशन और ऐनिमेशन वाली प्रॉपर्टी का विज़ुअलाइज़ेशन दिखेगा.
::after स्यूडो-एलिमेंट का इस्तेमाल करके, सफ़ेद सर्कल को बनाया और ऐनिमेट किया गया है.
ऐनिमेशन के दौरान pulse-dot ऐनिमेशन में बिंदु को बढ़ाने और उसे छोटा करने के लिए transform: scale का इस्तेमाल किया गया है.
.pulsating-circle::after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
इस तरह के ऐनिमेशन का इस्तेमाल आपके ऐप्लिकेशन में कई जगहों पर किया जा सकता है, ज़रूरी है कि इन छोटे-छोटे हिस्सों से आपके ऐप्लिकेशन की पूरी परफ़ॉर्मेंस पर कोई असर न पड़े.
शुद्ध CSS 3D स्फ़ीयर
CodePen पर Pure CSS 3D स्फ़ीयर देखना
यह ऐनिमेशन बहुत मुश्किल लग रहा है, हालांकि इसमें ऐसी तकनीकों का इस्तेमाल किया गया है जो ऊपर दिए गए उदाहरणों में देखी जा चुकी हैं. जटिलता की वजह, बड़ी संख्या में एलिमेंट का ऐनिमेशन तैयार करना होती है.
Chrome DevTools खोलें और plane क्लास वाले एलिमेंट में से कोई एक चुनें.
गोला, घूमने वाले हवाई जहाज़ों और तीजियों के सेट से बना है.
ये प्लेन और स्पेक, एक रैपर <div> के अंदर होते हैं.
साथ ही, यही एलिमेंट transform: rotate3d का इस्तेमाल करके घूम रहा होता है.
.sphere-wrapper {
transform-style: preserve-3d;
width: 300px;
height: 300px;
position: relative;
animation: rotate3d 10s linear infinite;
}
@keyframes rotate3d {
0% {
transform: rotate3d(1, 1, 1, 0deg);
}
25% {
transform: rotate3d(1, 1, 1, 90deg);
}
50% {
transform: rotate3d(1, 1, 1, 180deg);
}
75% {
transform: rotate3d(1, 1, 1, 270deg);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
बिंदुओं को plane और spoke एलिमेंट में नेस्ट किया जा सकता है.
वे ऐनिमेशन का इस्तेमाल करते हैं जो स्केल करने और अनुवाद करने के लिए 'ट्रांसफ़ॉर्म' का इस्तेमाल करता है.
इससे पल्सिंग इफ़ेक्ट बनता है.
.spoke-15 .dot,
.spoke-21 .dot {
animation: pulsate 0.5s infinite 0.83333333s alternate both;
background-color: #55ffee;
}
@-webkit-keyframes pulsate {
0% {
transform: rotateX(90deg) scale(0.3) translateZ(20px);
}
100% {
transform: rotateX(90deg) scale(1) translateZ(0px);
}
}
इस ऐनिमेशन को बनाने का काम सही समय को लेकर, मोड़ और पल्सिंग वाला इफ़ेक्ट तैयार करना है. ऐनिमेशन बहुत आसान हैं और उनमें बहुत अच्छा परफ़ॉर्म करने वाले तरीकों का इस्तेमाल किया जाता है.
Chrome DevTools को खोलकर और इसके चलने के दौरान परफ़ॉर्मेंस रिकॉर्ड करके, यह देखा जा सकता है कि यह ऐनिमेशन कैसा परफ़ॉर्म कर रहा है. शुरुआती लोड के बाद, ऐनिमेशन लेआउट या पेंट को ट्रिगर नहीं कर रहा है और बिना किसी रुकावट के चलता है.
नतीजा
इन उदाहरणों से आपको पता चल सकता है कि बेहतर परफ़ॉर्मेंस देने वाले तरीकों का इस्तेमाल करके, कुछ प्रॉपर्टी को ऐनिमेट करके, कैसे शानदार ऐनिमेशन बनाए जा सकते हैं. ऐनिमेशन गाइड में बताए गए प्रदर्शन करने के तरीकों को डिफ़ॉल्ट रूप से सेट करके, आप पेज की गति कम होने की चिंता किए बिना अपना समय अपनी पसंद के हिसाब से बना सकते हैं.