इस पोस्ट में जानें कि 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);
}
}
इस तरह के ऐनिमेशन का इस्तेमाल आपके ऐप्लिकेशन में कई जगहों पर किया जा सकता है. यह ज़रूरी है कि इन छोटी-छोटी चीज़ों से आपके ऐप्लिकेशन की परफ़ॉर्मेंस पर कोई असर न पड़े.
प्योर सीएसएस 3D स्फ़ीर
CodePen पर, सिर्फ़ सीएसएस का इस्तेमाल करके बनाया गया 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 खोलकर और ऐनिमेशन के चलने के दौरान उसकी परफ़ॉर्मेंस रिकॉर्ड करके, यह देखा जा सकता है कि यह ऐनिमेशन कैसा परफ़ॉर्म करता है. शुरुआती लोड के बाद, ऐनिमेशन लेआउट या पेंट को ट्रिगर नहीं कर रहा है और आसानी से चल रहा है.
नतीजा
इन उदाहरणों से पता चलता है कि बेहतर परफ़ॉर्मेंस वाले तरीकों का इस्तेमाल करके, कुछ प्रॉपर्टी को ऐनिमेट करने से, बहुत शानदार ऐनिमेशन बनाए जा सकते हैं. ऐनिमेशन गाइड में बताए गए बेहतर तरीकों का इस्तेमाल करके, अपने हिसाब से इफ़ेक्ट बनाया जा सकता है. इससे, पेज के धीमे होने की चिंता भी कम होती है.