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